A Quick and Dirty Guide to Post Type Templates in WordPress

A Quick and Dirty Guide to Post Type Templates in WordPress

WordPress 4.7 has delivered some fantastic new enhancements to the CMS’s template system. Templates have now been expanded to include all post types, allowing developers to create more nuanced themes and at the same time allowing site owners to manage content more easily.

But how does it all work? In this article, I’ll show you how to use post type templates in your themes with a few easy examples.

Continue reading, or jump ahead using these links:

What are Templates in WordPress?

Templates are essentially special files that can change the look and feel of a page and/or add functionality to your WordPress website.

Prior to WordPress 4.7 templates were only available for pages, thus they were dubbed page templates. However, WordPress 4.7 has expanded their use to include any post type, so I am hereby renaming them “templates” for short.

WordPress template selector
The WordPress template selector in the Post Editor.

Once templates are registered in the theme, they can be selected on single post edit pages.

Laying the Groundwork for Using Templates

Let’s work on an example.

To test this out we should create a child theme first. Let’s use Twenty Seventeen, the new default WordPress theme.

To get started, create a new folder in your theme directory. I named mine “cppt” (short for custom post type templates) and then I added new new files: style.css and functions.php. Use the code below to set up these files:

All set! You should now see the child theme in the Appearance section of your WordPress admin. Once activated you should see a vanilla, unmodified Twenty Seventeen experience.

Creating a Custom Post Type

Let’s test the new template system with a custom post type. Imagine you’re creating a website about games, like IGN or Gamespot.

While writing about games you might publish news items, which are shorter pieces and full reviews, which provide an in-depth look at the game.

To make one look different than the other you need to use a category or some other arbitrary device; templates make this more straightforward.

I’ve omitted many labels and options and this bare bones code will be just fine for our purposes.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Creating Templates

A template is a regular PHP file with a special comment at the top, which tells WordPress what the title of the template is and where it can be used.

Let’s create one for our game reviews now:

When you create a game post you should see the template selector with two options: Default and Game Review. Once you select a template for a post, the code within the template will be used for that post.

Default Game Post
Here’s my default game review post.
Game Review Post
And another image from my game review post.

To create the views I mostly copy-pasted from Twenty Seventeen. I created the template-game-review.php file with the following code:

I got all that from single.php in Twenty Seventeen. I modified the get_header() function with a parameter to pull in a different header (to make sure the site masthead was removed). I also modified the parameters of the get_template_part() function to make it get_template_part( 'template-parts/game/content', 'review' );, but that’s all.

I then created the new header file header-review.php. I copy-pasted the code from Twenty Seventeen’s header.php into it and then removed the following line:

I followed this up by creating template-parts/game/content-review.php. I pasted Twenty Seventeen’s content.php into it and removed some code that wasn’t needed since it only pertained to non-single page items. I added the following code to the very top:

I added a little bit of CSS to position it to the top and give it some basic styling:

Wrapping Up

Using templates is extremely easy and provides a wealth of new options to developers. It could make our code better organized and standardized across different themes.

If you’d like to see it all in action, download the quick example I made to showcase this enhancement.

If you have some ideas about how we could use this new functionality let us know in the comments below!

Tags:

Daniel Pataki Daniel is the CTO at Kinsta and has written for many outstanding publications like WPMU DEV and Smashing Magazine. In his spare time, you'll find him playing board games or planning the next amazing office game like the not-at-all-destructive Megaball.