Custom Post Types for Right-Brained folks (aka The designer's guide to coding custom post types) Presented by: Tracy Levesque , co-owner of YIKES, Inc. yikesinc.com [email protected]@yikesinc @liljimmi Slides: slideshare.net/thetracyL Files: github.com/thetracyL
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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Custom Post Typesfor Right-Brained folks
(aka The designer's guide to coding custom post types)
Presented by: Tracy Levesque, co-owner of YIKES, Inc. yikesinc.com [email protected] @yikesinc @liljimmi
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
Pages Posts
WordPress comes with 2 major Post Types:
&
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.
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
What are Custom Post Types?
Staff
“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.
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
Making Custom Post TypesWhere do we put our files?
It's 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.
images
kittens
incinc
functions.phpkittens.phpsingle-wcp_kittens.phptaxonomy-custom_cat_color.php, etc.
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
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.
The path and file name of the CPT file.
/************* CPT Stuff *************/
// Load our "Kittens" custom post typerequire_once 'inc/kittens.php';
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
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.
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
Making Custom Post Types
inc/kittens.php
Important note from the WordPress Codex:
Naming Best PracticesWhile it's 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.
The CPT's name.
// creating (registering) the custom type register_post_type( 'wcp_kittens', ...
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
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 listof blog posts. This is where you can shine with your mad design skills.
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.
The template shows up under page attributesand it can be assigned it to any page.
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
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 I've learned is to use WP_Query and not query_posts for loops. I couldn't tell you why, but I know it's important.
A lot of CPT “tutorials” on the Internets use query_posts. If you see this don't use that code!
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
Making Custom Post TypesWordPress 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 doesn't find it, it will look for the next file in the template hierarchy.
The WordPress template hierarchy for CPTs goes like this:
In the demo the single template filename is: single-wcp_kittens.php
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
Making Custom Post TypesTIP: Hey! I did what you said, but I'm getting a 404
Have named everything correctly and you're 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.
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
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).
Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)
Non-Cheesy WordPress Custom Post Type IconsYou know we designers care about our CPT icons. Here you can download 3,000 of them!nathaningram.com/recommendations/wordpress...
WordPress Custom Post Type GeneratorEnter your variables and it spits out CPT code for you.weareo3.com/wordpress-custom-post-type-generator/
Plugin: Advanced Custom FieldsUse 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-PostsUse this plugin to create relationships between CPTswordpress.org/extend/plugins/posts-to-posts/