custom post types for designers

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

Slides: slideshare.net/thetracyLFiles: github.com/thetracyL

mailto:[email protected]

Tracy Levesque [email protected]@yikesinc @lilimmi

Custom Post Types for Right-Brained Folks(aka The designer's guide to coding Custom Post Types)

Hi, I'm Tracy

I make custom themes for WordPress




Hi, I'm Tracy

I knowHTML




Hi, I'm Tracy

I knowCSS




Hi, I'm Tracy

I do not know PHP




Hi, I'm TracyI like building fancy functions for WordPress without bugging a Programmer.




Hi, I'm Tracy

I can do fancy WordPress stuff with Custom Post Types!


What are Custom Post Types?



Official description from WordPress.org

“A Custom Type is a Post Type you define.”

That's a little vague. Here's what it means...


https://codex.wordpress.org/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.





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.

The possibilities are endless!

Jobs

Case Studies

Press Contacts

ProductsRecipes

Listings




What are Custom Taxonomies?

Categories

Official description from WordPress.org

“Basically, a taxonomy is a way to group things together.”

WordPress comes with 2 Taxonomies for posts:

&

They help you organize your posts and create archives for your posts by a topic or keyword.

Tags


http://codex.wordpress.org/Taxonomies



What are Custom Taxonomies?

Genre

If we created a Custom Post Type “Movies” we could use the following custom taxonomies to go with it.

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.

Year Director Rating




CPTs in ActionA tour of the Kittens demo theme

Demo time....


What You Need to Create a CPT



functions.php

your_cpt.php

Controls the fancy stuff in your theme orchild theme.

All the functions and actions for your CPT. You could stick all of this in functions.php, but that would be messy.

your_cpt-template.phpThe template for your CPT's “loop” page (like index.php is for posts).

single-your_cpt.phpThe template for a single post of your CTP.

taxonomy-custom_tax.phpThe template for your custom taxonomies' archive page (you can have a different template for each taxonomy).




Making Custom Post TypesHere we go!

I'm 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 Automatic's “Underscores” as its base.

● The Bones starter theme Custom Post Type template withsome adds/edits/deletes from me.


http://underscores.me/

http://themble.com/bones/



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.

kittens.php

kitten-icon.png




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';


http://codex.wordpress.org/Theme_Development#Functions_File




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.


http://codex.wordpress.org/Function_Reference/register_post_type




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', ...


http://codex.wordpress.org/Function_Reference/register_post_type




inc/kittens.php

Demo time....





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.


http://codex.wordpress.org/The_Loop




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!


http://www.youtube.com/watch?v=8vsYEvyEaZw

kittens.php

This code snippet in the template is the WP_Query for the CPT.

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.



<?php $kittensloop = new WP_Query(array ( 'post_type' => 'wcp_kittens', 'orderby' => 'title', 'order' => 'ASC' ) ); ?>


http://codex.wordpress.org/Class_Reference/WP_Query#Parameters




kittens.php

Demo time....




Making Custom Post TypesLet's take a minute to talk about the WordPress template hierarchy


http://codex.wordpress.org/Template_Hierarchy



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

single-your_cpt.php single.php index.php

CPT name.




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.

Hit save!


single-wcp_kittens.php

<?php echo get_the_post_thumbnail($page->ID, 'kittens-single'); ?>

<div class="entry-meta">

<?php the_terms( $post->ID, 'custom_cat_breeds', '<strong>Breed:</strong> ', ', ', ' ' ); ?>

Using a custom thumbnail size can

be a nice touch to the design.

The code that spits out the custom taxonomies

for our post.


http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

http://codex.wordpress.org/Function_Reference/the_terms




single-wcp_kittens.php

Demo time....




Making Custom Post TypesBack 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:

taxonomy-custom_tax-term.php taxonomy-custom_tax.php

taxonomy.php archive.php index.php

Custom tax's name. A specific term of the custom tax.


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

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

This spits out the custom tax name

This spits out the term name



Making Custom Post TypesFULL DISCLOSURE

I got that first chunk of code from Carlos :-)





taxonomy.php, taxonomy-custom_cat_color.php

Demo time....




That's it...for NowThose 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... !


Resources!



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/


http://nathaningram.com/recommendations/wordpress-custom-post-type-icons/

http://www.weareo3.com/wordpress-custom-post-type-generator/

http://wordpress.org/extend/plugins/advanced-custom-fields/

http://wordpress.org/extend/plugins/posts-to-posts/

Question Time

?




Thank you!Slides: slideshare.net/thetracyL

Files: github.com/thetracyL




custom post types for designers

Technology

coding custom post types

major post types

single post

custom post type movies

thekittens custom post

designers guide

unique types of content

orga custom type