Custom Post Type - Create and Display


Published on

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.

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Custom Post Type - Create and Display

  1. 1. Creating and Displaying Custom Post Types
  2. 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.
  3. 3. If I have to write more than 4 lines of code, my head explodes
  4. 4. Plugin: Custom Post Type UI
  5. 5. C r e at e D i s p l ay Custom Post Type called Portfolio
  6. 6. Here’s what it will look like Demo
  7. 7. Let’s Create
  8. 8. c r e a t e : P o r t f o li o Download Install Activate And here it is Add New
  9. 9. c r e a t e : P o r t f o li o portfolio Portfolio
  10. 10. c r e a t e : P o r t f o li o Advanced Options Change to True Scroll down to continue
  11. 11. c r e a t e : P o r t f o li o
  12. 12. c r e a t e : P o r t f o li o Next: Create a Taxonomy work_type Work Type
  13. 13. c r e a t e : P o r t f o li o Associate Taxonomy with Portfolio
  14. 14. c r e a t e : P o r t f o li o
  15. 15. Show the posts you have created Demo
  16. 16. The first time = 404 Settings>Permalinks and then update your present permalink structure by just clicking on the Save Changes button
  17. 17. Learn to Display
  18. 18. CPT : What is it?
  19. 19. 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
  20. 20. D ispl a y : T e m pl a t e s single.php Start with 3 exisiting files archive.php taxonomy.php
  21. 21. 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
  22. 22. See, it really works Demo
  23. 23. 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
  24. 24. SoWhy? To make your CPT posts look different from your single and archive posts that appear in your blog.
  25. 25. 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
  26. 26. 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(); ?>
  27. 27. <?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; ?>
  28. 28. D ispl a y : m o di f y th e T e m pl 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) functions.php //Enable support for Post Thumbnails add_image_size( ‘portfolio-thumb’, 250, 250, true );
  29. 29. More Display Fun CSS and the Body Class Thank you Becky Davis
  30. 30. D ispl a y : C S S a n d B o d y cl a ss
  31. 31. 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
  32. 32. 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; }
  33. 33. Sidebar Navigation Shows links to Work Type Terms
  34. 34. 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
  35. 35. D ispl a y : S id e b a r Custom Sidebars Taxonomy List Widget Work Type Work Type
  36. 36. Let’s see the sidebar in action Demo
  37. 37. Another way to Display: Page Template! bye bye archive-portfolio.php
  38. 38. Why a Page?  More control with design  Easier to add to a menu  Easier to add custom sidebars
  39. 39. 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:
  40. 40. D ispl a y : T e m pl a t e s / P AGE
  41. 41. 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
  42. 42. D ispl a y : T e m pl a t e s Using the plugin Grid FX
  43. 43. Here’s the Page with Grid X plugin Demo
  44. 44. Resources Custom Post Type UI Custom Sidebars Plugins Grid FX Taxonomy List Widget Post Types Order Regenerate Thumbnails
  45. 45. 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.