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.

1. Creating and Displaying
Custom Post Types

2. Welcome to my WordPress Lab.
This is where I test WP stuff.
***
Today we are going to create
a Custom Post Type called Portfolio.

4. If I have to write more than 4 lines of code, my head explodes

5. Plugin:
Custom Post Type UI

6. C r e at e
D i s p l ay
Custom Post Type called Portfolio

7. Here’s what it will look like
Demo

8. Let’s Create

9. c r e a t e : P o r t f o li o
Download
Install
Activate
And here it is
Add New

10. c r e a t e : P o r t f o li o
portfolio
Portfolio

11. c r e a t e : P o r t f o li o
Advanced Options
Change to True
Scroll down to continue

12. c r e a t e : P o r t f o li o

13. c r e a t e : P o r t f o li o
Next: Create a Taxonomy
work_type
Work Type

14. c r e a t e : P o r t f o li o
Associate Taxonomy with Portfolio

15. c r e a t e : P o r t f o li o

16. Show the posts you have created
Demo

17. The first time = 404
Settings>Permalinks and then update your present permalink structure
by just clicking on the Save Changes button

18. Learn to Display

19. CPT : What is it?

20. 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

21. D ispl a y : T e m pl a t e s
single.php
Start with 3 exisiting files
archive.php
taxonomy.php

22. D ispl a y : T e m pl a t e s
single-portfolio.php
Add a slug to the name
archive-portfolio.php
taxonomy-work_type.php

23. See, it really works
Demo

24. th e m a g ic o f :
Template Hierarchy
a r chi v e p o st :
si n g l e p o st :
T a x o n o m y p o st :
archive-portfolio.php
single-portfolio.php
taxonomy-work_type-logo.php
archive.php
single.php
taxonomy-work_type.php
index.php
index.php
taxonomy.php
archive.php
index.php

25. SoWhy?
To make your CPT posts look different
from your single and archive posts
that appear in your blog.

26. D ispl a y : M o di f y th e t e m pl a t e
taxonomy-work_type.php
Page Title
Thumbnail
Post Title

27. get_header(); ?>
<section id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>
the loop
<?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(); ?>

28. <?php if ( have_posts() ) : ?>
<h1 class=”tax-title”><span>Work Type: </span>
Page Title
<?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”>
Thumbnail
Post Title
<?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;
?>

29. D ispl a y : m o di f y th e T e m pl a t e s
https://codex.wordpress.org/
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)
functions.php
//Enable support for Post Thumbnails
add_image_size( ‘portfolio-thumb’, 250, 250, true );

30. More Display Fun
CSS and the Body Class
Thank you Becky Davis

31. D ispl a y : C S S a n d B o d y cl a ss
H1.page-title

32. D ispl a y : C S S a n d B o d y cl a ss
Use chrome inspector tool to find body class
class = .post-type-archive-portfolio

33. D ispl a y : C S S a n d B o d y cl a ss
.post-type-archive-portfolio #primary h1.entry-title
{
font-weight:700; font-size:15px; letter-spacing: .15em;
border: 1px #ccc dotted; padding: 20px;
}

34. Sidebar Navigation
Shows links to Work Type Terms

35. D ispl a y : sid e b a r

Custom Sidebars

Taxonomy* List Widget
2 Plugins
*Posts use Categories // Custom Post Types use Taxonomy/Terms

36. D ispl a y : S id e b a r
Custom Sidebars
Taxonomy List Widget
Work Type
Work Type

37. Let’s see the sidebar in action
Demo

38. Another way to Display:
Page Template!
bye bye archive-portfolio.php

39. Why a Page?
 More control with design
 Easier to add to a menu
 Easier to add custom sidebars

40. D ispl a y : T e m pl a t e s / P AGE
Look Familiar?
Duplic ate:
page.php
Rename:
page-portfolio.php
/* Template Name: Portfolio Page*/
Op en an d Add:

41. D ispl a y : T e m pl a t e s / P AGE

42. D ispl a y : T e m pl a t e s / P a g e
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);
?>
<?php
while ( $loop->have_posts() ) : $loop->the_post();
get_template_part( ‘content’, get_post_format() );
endwhile;
twentyfourteen_paging_nav();
wp_reset_postdata();
?>
OR

43. D ispl a y : T e m pl a t e s
Using the plugin Grid FX

44. Here’s the Page with Grid X plugin
Demo

46. Resources
Custom Post Type UI
Custom Sidebars
Plugins
Grid FX
Taxonomy List Widget
Post Types Order
Regenerate Thumbnails

47. Resources
U r b a n D icti o n a r y :
You can find anything on the Internet if you are willing
to look for it long enough.