View
6.270
Download
1
Category
Tags:
Preview:
DESCRIPTION
There are lots of resources that explain how to create a Custom Post Type, but few go into detail on how to display. This presentation does both, all from a Designer's perspective.
Citation preview
Creating and DisplayingCustom Post Types
Welcome to my WordPress Lab.
This is where I test WP stuff.
* * *
Today we are going to create a Custom Post Type called Portfolio.
If I have to write more than 4 lines of code, my head explodes
Custom Post Type UIPlugin:
Custom Post Type called Portfolio
C r e a t e D i s p l a y
Here’s what it will look like
Demo
Let’s Create
C r e a T e : P o r T f o L I o
And here it is
Download
Activate
Install
Add New
C r e a T e : P o r T f o L I o
portfolio
Portfolio
C r e a T e : P o r T f o L I o
Change to True
Advanced Options
Scroll down to continue
C r e a T e : P o r T f o L I o
C r e a T e : P o r T f o L I o
work_type
Work Type
Next: Create a Taxonomy
C r e a T e : P o r T f o L I o
Associate Taxonomy with Portfolio
C r e a T e : P o r T f o L I o
Demo
Show the posts you have created
The first time = 404
Settings>Permalinks and then update your present permalink structure by just clicking on the Save Changes button
Learn to Display
CPT : What is it?
It’s not a post. But it acts like a post It displays content on a Single post page
It can display content on an Archive page
It’s not a page. But it acts like a page It’s not heirarchical
You can assign it a page template
Normally, it can’t access categories that were created by the Post
D I S P L a y : T e m P L a T e S
Start with 3 exisiting files
single.php
archive.php
taxonomy.php
D I S P L a y : T e m P L a T e S
add a slug to the name
single-portfolio.php
archive-portfolio.php
taxonomy-work_type.php
See, it really works
Demo
Template HierarchyT H e m a g I C o f :
a r C H I v e P o S T :
archive-portfolio.php
archive.php
index.php
T a x o n o m y P o S T :
taxonomy-work_type-logo.php
taxonomy-work_type.php
taxonomy.php
archive.php
index.php
S I n g L e P o S T :
single-portfolio.php
single.php
index.php
To make your CPT posts look different from your single and archive posts
that appear in your blog.
SoWhy?
taxonomy-work_type.php
Page Title
Thumbnail
Post Title
D I S P L a y : m o D I f y T H e T e m P L a T e
get_header(); ?> <section id=”primary” class=”content-area”> <div id=”content” class=”site-content” role=”main”>
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post();?> <?php endwhile; twentyfourteen_paging_nav(); else : get_template_part( ‘content’, ‘none’ ); endif; ?>
</div><!-- #content --> </section><!-- #primary --><?php get_sidebar(); ?><?php get_footer(); ?>
the loop
Thumbnail
Post Title
Page Title
<?php if ( have_posts() ) : ?> <h1 class=”tax-title”><span>Work Type: </span>
<?php $term_list = wp_get_post_terms($post->ID, ‘work_type’, array(“fields” => “names”)); $x = $term_list[0]; echo “$x”; ?>
</h1> <?php while ( have_posts() ) : the_post();?> <div class=”grid”>
<?php echo the_post_thumbnail(‘portfolio-thumb’); ?>
<h4><a href=”<?php the_permalink(); ?>”> <?php the_title(); ?></a></h4>
</div> <?php endwhile; twentyfourteen_paging_nav(); else : get_template_part( ‘content’, ‘none’ ); endif; ?>
D I S P L a y : m o D I f y T H e T e m P L a T e S
the_post_thumbnail(); // without parameter -> ‘post-thumbnail’
the_post_thumbnail(‘thumbnail’); // Thumbnail (default 150px x 150px max)
the_post_thumbnail(‘medium’); // Medium resolution (default 300px x 300px max)
the_post_thumbnail(‘large’); // Large resolution (default 640px x 640px max)
the_post_thumbnail(‘full’); // Full resolution (original size uploaded)
//Enable support for Post Thumbnails
add_image_size( ‘portfolio-thumb’, 250, 250, true );
https://codex.wordpress.org/
functions.php
Thank you Becky Davis
CSS and the Body Class
More Display Fun
D I S P L a y : C S S a n D B o D y C L a S S
H1.page-title
D I S P L a y : C S S a n D B o D y C L a S S
Use chrome inspector tool to find body class
class = .post-type-archive-portfolio
D I S P L a y : C S S a n D B o D y C L a S S
.post-type-archive-portfolio #primary h1.entry-title
{
font-weight:700; font-size:15px; letter-spacing: .15em;
border: 1px #ccc dotted; padding: 20px;
}
Sidebar Navigation
Shows links to Work Type Terms
D I S P L a y : S I D e B a r
2 Plugins Custom Sidebars
Taxonomy* List Widget
*Posts use Categories // Custom Post Types use Taxonomy/Terms
D I S P L a y : S I D e B a r
Custom Sidebars Taxonomy List Widget
Work Type
Work Type
Let’s see the sidebar in action
Demo
another way to Display:
Page Template!
bye bye archive-portfolio.php
Why a Page? more control with design
easier to add to a menu
easier to add custom sidebars
D I S P L a y : T e m P L a T e S / P a g e
Look familiar?
DUPLICaTe: page.php
rename: page-portfolio.php
oPen anD aDD: /* Template Name: Portfolio Page*/
D I S P L a y : T e m P L a T e S / P a g e
or
Add php code to the template Use a Plugin: Grid FX
<?php$args = array( ‘post_type’ => ‘portfolio’, ‘posts_per_page’ => 10 );$loop = new WP_Query($args);?>
<?phpwhile ( $loop->have_posts() ) : $loop->the_post();get_template_part( ‘content’, get_post_format() );endwhile;twentyfourteen_paging_nav();wp_reset_postdata();?>
D I S P L a y : T e m P L a T e S / P a g e
Using the plugin Grid FX
D I S P L a y : T e m P L a T e S
Here’s the Page with grid x plugin
Demo
r e S o U r C e S
Custom Post Type UI
Custom Sidebars
Grid FX
Taxonomy List Widget
Post Types Order
Regenerate Thumbnails
Plugins
r e S o U r C e S
U r B a n D I C T I o n a r y :
You can find anything on the Internet if you are willing to look for it long enough.
Recommended