Custom Post Types For Designers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Custom Post Types For Designers

on

  • 6,526 views

The slides for my presentation at WordCamp Philly 2012, October 20, 2012. A designer-friendly guide to creating custom post types for WordPress. The files used for the demo can be found on Github: ...

The slides for my presentation at WordCamp Philly 2012, October 20, 2012. A designer-friendly guide to creating custom post types for WordPress. The files used for the demo can be found on Github: https://github.com/TheTracyL/CPTs-For-Designers

Statistics

Views

Total Views
6,526
Views on SlideShare
6,031
Embed Views
495

Actions

Likes
2
Downloads
57
Comments
0

10 Embeds 495

http://www.yikesinc.com 412
http://profiles.healthitinsider.com 27
https://twitter.com 25
http://yikesinc.wpengine.com 18
http://dev.yikesinc.com 8
http://twitter.com 1
http://wpsupergeek.com 1
http://yikesnet.com 1
http://localhost 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Custom Post Types For Designers Presentation Transcript

  • 1. Custom Post Typesfor Right-Brained folks (aka The designers guide to coding custom post types) Presented by: Tracy Levesque, co-owner of YIKES, Inc. yikesinc.com tracy@yikesinc.com @yikesinc @liljimmi Slides: slideshare.net/thetracyL Files: github.com/thetracyL
  • 2. Hi, Im Tracy I make custom themes for WordPress Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 3. Hi, Im Tracy I know HTML Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 4. Hi, Im Tracy I know CSS Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 5. Hi, Im Tracy I do not know PHP Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 6. Hi, Im Tracy I like building fancy functions for WordPress without bugging a Programmer. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 7. Hi, Im Tracy I can do fancy WordPress stuff with Custom Post Types! Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 8. What are Custom Post Types? Official description from WordPress.org “A Custom Type is a Post Type you define.” Thats a little vague. Heres what it means... Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 9. What are Custom Post Types? WordPress comes with 2 major Post Types: Pages & Posts They both ● Are unique types of content with their own sets of data fields ● Have their own admin area on the WordPress admin ● Let you add content in a repeating and consistent manner ● Have a consistent layout (by default) on the front-end of your site. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 10. What are Custom Post Types? “A Custom Type is a Post Type you define.” You can create your own post type that has its own fields, admin in the back- end and layout on the front-end. This is perfect for any type of repeating content you want to manage easily from the WordPress admin. The possibilities are endless! Staff Recipes Products Jobs Case Listings Press Contacts Studies Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 11. What are Custom Taxonomies? Official description from WordPress.org “Basically, a taxonomy is a way to group things together.” WordPress comes with 2 Taxonomies for posts: Categories & Tags They help you organize your posts and create archives for your posts by a topic or keyword. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 12. What are Custom Taxonomies? If we created a Custom Post Type “Movies” we could use the following custom taxonomies to go with it. Genre Year Director Rating With these custom taxonomies, you could create archive pages to see all movies by genre, year, etc. Each archives page can have its own layout if you like. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 13. CPTs in Action A tour of the Kittens demo theme Demo time.... Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 14. What You Need to Create a CPT Controls the fancy stuff in your theme or functions.php child theme. All the functions and actions for your CPT. your_cpt.php You could stick all of this in functions.php, but that would be messy. The template for your CPTs “loop” page your_cpt-template.php (like index.php is for posts). The template for a single post of your CTP. single-your_cpt.php The template for your custom taxonomies taxonomy-custom_tax.php archive page (you can have a different template for each taxonomy). Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 15. Making Custom Post Types Here we go! Im going to give you a tour all the files and code that goes with the“Kittens” Custom Post Type. I am using: ● A Frankenstein starter/development theme I built that uses Automatics “Underscores” as its base. ● The Bones starter theme Custom Post Type template with some adds/edits/deletes from me. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 16. Making Custom Post Types Where do we put our files? Its important to keep your files organized. Below is the structure used in this example, but you can use another that makes sense and works for you. You could alternatively build a CPT to act like a plugin instead of incorporating it into the theme. functions.php kittens.php kittens single-wcp_kittens.php taxonomy-custom_cat_color.php, etc. inc kittens.php images kitten-icon.png Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 17. Making Custom Post Types functions.php If you have experience building themes or child themes, you should be familiar with the functions.php file. It controls all the fancyness that goes on in your theme: sidebars, nav menus, thumbnail sizes, custom headers, etc... It can also load custom post types. The line of code, below, adds the Kittens CPT to the theme. /************* CPT Stuff *************/ // Load our "Kittens" custom post type require_once inc/kittens.php; The path and file name of the CPT file. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 18. Making Custom Post Types inc/kittens.php This is where the “Kittens” Custom Post Type and its custom taxonomies are defined. You could put all of this stuff in functions.php, but that would be a hot mess. Also, if you break something while developing your CPT, you can comment it out in the functions file to “turn it off” while you figure out what went wrong. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 19. Making Custom Post Types inc/kittens.php Important note from the WordPress Codex: Naming Best Practices While its convenient to name your custom post type a simple name like "product"...it is better if you prefix your name with a short "namespace" that identifies your plugin, theme or website... Also CPT names have a max. of 20 characters and can not contain capital letters or spaces. // creating (registering) the custom type register_post_type( wcp_kittens, ... The CPTs name. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 20. Making Custom Post Types inc/kittens.php Demo time.... Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 21. Making Custom Post Types kittens.php This is the template that spits out the CPT loop. It acts like index.php, the file that displays the list of blog posts. This is where you can shine with your mad design skills. The template shows up under page attributes and it can be assigned it to any page. What is The Loop? What is a query? The Loop is the process of displaying posts. You can use HTML/CSS in The Loop to format how the list of posts are displayed. A query defines what info you are going to show in The Loop and in what order. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 22. Making Custom Post Types kittens.php Important use WP_Query and not query_posts Often at Wordcamps, I sit in developer sessions and try to do a little learning by osmosis. One thing Ive learned is to use WP_Query and not query_posts for loops. I couldnt tell you why, but I know its important. A lot of CPT “tutorials” on the Internets use query_posts. If you see this dont use that code! Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 23. Making Custom Post Types kittens.php This code snippet in the template is the WP_Query for the CPT. <!-- Our kittens Wp_Query and array --> <?php $kittensloop = new WP_Query(array ( post_type => wcp_kittens, orderby => title, order => ASC ) ); ?> What is an array? An array is a way to pass multiple instructions to a single query. There are many options you can use in an array with WP_Query. Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 24. Making Custom Post Types kittens.php Demo time.... Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 25. Making Custom Post Types Lets take a minute to talk about the WordPress template hierarchy Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 26. Making Custom Post Types WordPress has an awesome template hierarchy that allows you to make custom templates for various CPT pages as long as you follow its naming convention. WordPress will automatically look for a template for the “Single” post page for a CPT. If it doesnt find it, it will look for the next file in the template hierarchy. The WordPress template hierarchy for CPTs goes like this: single-your_cpt.php single.php index.php CPT name. In the demo the single template filename is: single-wcp_kittens.php Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 27. Making Custom Post Types TIP: Hey! I did what you said, but Im getting a 404 Have named everything correctly and youre getting a 404 when you click on your CPT? Before Googling, reading support forums and going out of your mind refresh your permalinks. That should do the trick. Hit save! Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 28. Making Custom Post Types single-wcp_kittens.php Using a custom The code that spits out thumbnail size can the custom taxonomies be a nice touch for our post. to the design. <!-- grabbing the custom thumbnail "kittens-single" for this kitten --> <?php echo get_the_post_thumbnail($page->ID, kittens- single); ?> <!-- Output of all our kitten Custom Taxonomies --> <div class="entry-meta"> <?php the_terms( $post->ID, custom_cat_breeds, <strong>Breed:</strong> , , , ); ?> Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 29. Making Custom Post Types single-wcp_kittens.php Demo time.... Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 30. Making Custom Post Types Back to the WordPress template hierarchy... The WordPress template hierarchy for custom taxonomies allows you make a custom template for a single term of a taxonomy and up from there. The WordPress template hierarchy for CPTs goes like this: Custom taxs name. A specific term of the custom tax. taxonomy-custom_tax-term.php taxonomy-custom_tax.php taxonomy.php archive.php index.php Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 31. Making Custom Post Types taxonomy.php, taxonomy-custom_cat_color.php In the demo I made 2 templates for custom taxonomies. One that acts as a default for all custom tax (taxonomy.php) and one specifically for “Colors”that will override the default for just that taxonomy (taxonomy- custom_cat_color). This spits out the This spits out the term name custom tax name <header> <h1 class="page-title"> <?php $the_tax = get_taxonomy( get_query_var( taxonomy ) ); echo $the_tax->labels->name; ?>: <?php single_cat_title(); ?> </h1> </header><!-- .page-header --> Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 32. Making Custom Post Types FULL DISCLOSURE I got that first chunk of code from Carlos :-) Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 33. Making Custom Post Types taxonomy.php, taxonomy-custom_cat_color.php Demo time.... Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 34. Thats it...for Now Those are all the files used for this demo, but there are many more things you can do with Custom Post Types: ● Add custom fields and metaboxes to the admin ● Display your custom fields in your templates ● Only allow certain user roles to see your CPT in the admin ● Combine your CPT with plugins to do fancy stuff ● Create search forms for your CPT ● And more... ! Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 35. Resources! Non-Cheesy WordPress Custom Post Type Icons You know we designers care about our CPT icons. Here you can download 3,000 of them! nathaningram.com/recommendations/wordpress... WordPress Custom Post Type Generator Enter your variables and it spits out CPT code for you. weareo3.com/wordpress-custom-post-type-generator/ Plugin: Advanced Custom Fields Use this plugin to add meta data to your CPTs. It includes a sweet date picker. wordpress.org/extend/plugins/advanced-custom-fields/ Plugin: Posts-2-Posts Use this plugin to create relationships between CPTs wordpress.org/extend/plugins/posts-to-posts/ Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 36. Question Time ? Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi
  • 37. Thank you! Slides: slideshare.net/thetracyL Files: github.com/thetracyL Tracy LevesqueCustom Post Types for Right-Brained Folks tracy@yikesinc.com(aka The designers guide to coding Custom Post Types) @yikesinc @lilimmi