{"id":161842,"date":"2017-01-07T13:00:55","date_gmt":"2017-01-07T13:00:55","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=161842"},"modified":"2022-03-02T04:01:54","modified_gmt":"2022-03-02T04:01:54","slug":"post-type-templates","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/post-type-templates\/","title":{"rendered":"A Quick and Dirty Guide to Post Type Templates in WordPress"},"content":{"rendered":"<p>WordPress 4.7 has delivered some fantastic new enhancements to the CMS&#8217;s template system. Templates have now\u00a0been 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.<\/p>\n<p>But how does it all work? In this article, I&#8217;ll show you how to use post type templates in your themes with a few easy examples.<\/p>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#templates-in-wordpress\">What are Templates in WordPress?<\/a><\/li>\n<li><a href=\"#using-templates\">Laying the Groundwork for Using Templates<\/a><\/li>\n<li><a href=\"#creating-a-custom-post-type\">Creating a Custom Post Type<\/a><\/li>\n<li><a href=\"#creating-templates\">Creating Templates<\/a><\/li>\n<\/ul>\n<h2 id=\"templates-in-wordpress\">What are Templates in WordPress?<\/h2>\n<p>Templates are essentially special files that can change the look and feel of a page and\/or add functionality to your WordPress website.<\/p>\n<p>Prior to WordPress 4.7 templates were only available for pages, thus they were dubbed <a href=\"https:\/\/developer.wordpress.org\/themes\/template-files-section\/page-template-files\/\" target=\"_blank\">page templates<\/a>. However, WordPress 4.7 has expanded their use to include <em>any<\/em> post type, so I am hereby renaming them &#8220;templates&#8221; for short.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/01\/WordPress-Template.png\" alt=\"WordPress template selector\" width=\"670\" height=\"531\" \/><figcaption class=\"wp-caption-text\">The WordPress template selector in the Post Editor.<\/figcaption><\/figure>\n<\/div>\n<p>Once templates are registered in the theme, they can be selected on single post edit pages.<\/p>\n<h2 id=\"using-templates\">Laying the Groundwork for Using Templates<\/h2>\n<p>Let&#8217;s work on an example.<\/p>\n<p>To test this out we should create a child theme first. Let&#8217;s use\u00a0<a href=\"https:\/\/wordpress.org\/themes\/twentyseventeen\/\" target=\"_blank\">Twenty Seventeen<\/a>, the new default WordPress theme.<\/p>\n<p>To get started, create a new folder in your theme directory. I named mine &#8220;cppt&#8221; (short for custom post type templates) and then I added new new files: <em>style.css<\/em> and <em>functions.php<\/em>. Use the code below to set up these files:<\/p>\n<div class=\"gist\" data-gist=\"7f262ddd286bd9c587096dffd2da43a4\" data-gist-file=\"style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/7f262ddd286bd9c587096dffd2da43a4.js?file=style.css\">Loading gist 7f262ddd286bd9c587096dffd2da43a4<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<div class=\"gist\" data-gist=\"f3a0f3d48211cb2a04bc8c9635ec97d0\" data-gist-file=\"functions.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/f3a0f3d48211cb2a04bc8c9635ec97d0.js?file=functions.php\">Loading gist f3a0f3d48211cb2a04bc8c9635ec97d0<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>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.<\/p>\n<h2 id=\"creating-a-custom-post-type\">Creating a Custom Post Type<\/h2>\n<p>Let&#8217;s test the new template system with a custom post type. Imagine you&#8217;re creating a website about games, like <a href=\"http:\/\/www.ign.com\/\" target=\"_blank\">IGN<\/a> or <a href=\"http:\/\/www.gamespot.com\/\" target=\"_blank\">Gamespot<\/a>.<\/p>\n<p>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.<\/p>\n<p>To make one look different than the other you need to use a category or some other arbitrary device; templates make this more straightforward.<\/p>\n<div class=\"gist\" data-gist=\"dffbe9c201e10dfec08b06bcd4aca180\" data-gist-file=\"custom-post-type.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/dffbe9c201e10dfec08b06bcd4aca180.js?file=custom-post-type.php\">Loading gist dffbe9c201e10dfec08b06bcd4aca180<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I&#8217;ve omitted many labels and options and this bare bones code will be just fine for our purposes.<\/p>\n<h2 id=\"creating-templates\">Creating Templates<\/h2>\n<p>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.<\/p>\n<p>Let&#8217;s create one for our game reviews now:<\/p>\n<div class=\"gist\" data-gist=\"9213f603f3807c030ea4c9081a27ee16\" data-gist-file=\"template-review.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/9213f603f3807c030ea4c9081a27ee16.js?file=template-review.php\">Loading gist 9213f603f3807c030ea4c9081a27ee16<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>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.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/01\/default-game-post.jpg\" alt=\"Default Game Post\" width=\"670\" height=\"312\" \/><figcaption class=\"wp-caption-text\">Here&#8217;s my default game review post.<\/figcaption><\/figure>\n<\/div>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/01\/review-game-post.jpg\" alt=\"Game Review Post\" width=\"670\" height=\"373\" \/><figcaption class=\"wp-caption-text\">And another image from my game review post.<\/figcaption><\/figure>\n<\/div>\n<p>To create the views I mostly copy-pasted from Twenty Seventeen. I created the <code>template-game-review.php<\/code> file with the following code:<\/p>\n<div class=\"gist\" data-gist=\"535174e290dbbdc950b4cb6d53d633a6\" data-gist-file=\"template-game-review.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/535174e290dbbdc950b4cb6d53d633a6.js?file=template-game-review.php\">Loading gist 535174e290dbbdc950b4cb6d53d633a6<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I got all that from <code>single.php<\/code> in Twenty Seventeen. I modified the <code>get_header()<\/code> 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 <code>get_template_part()<\/code> function to make it <code>get_template_part( 'template-parts\/game\/content', 'review' );<\/code>, but that&#8217;s all.<\/p>\n<p>I then created the new header file <em>header-review.php<\/em>. I copy-pasted the code from Twenty Seventeen&#8217;s <em>header.php<\/em> into it and then removed the following line:<\/p>\n<div class=\"gist\" data-gist=\"690eafbc9ce99da77ed91ac59080de5d\" data-gist-file=\"remove-image.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/690eafbc9ce99da77ed91ac59080de5d.js?file=remove-image.php\">Loading gist 690eafbc9ce99da77ed91ac59080de5d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I followed this up by creating <em>template-parts\/game\/content-review.php<\/em>. I pasted Twenty Seventeen&#8217;s <em>content.php<\/em> into it and removed some code that wasn&#8217;t needed since it only pertained to non-single page items. I added the following code to the very top:<\/p>\n<div class=\"gist\" data-gist=\"d7240927b6bf0fc89c25de74fbba3b92\" data-gist-file=\"custom-header.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/d7240927b6bf0fc89c25de74fbba3b92.js?file=custom-header.php\">Loading gist d7240927b6bf0fc89c25de74fbba3b92<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I added a little bit of CSS to position it to the top and give it some basic styling:<\/p>\n<div class=\"gist\" data-gist=\"ac9b1cd88798ac2454f293994fb6c07d\" data-gist-file=\"custom-header.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/ac9b1cd88798ac2454f293994fb6c07d.js?file=custom-header.css\">Loading gist ac9b1cd88798ac2454f293994fb6c07d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h2>Wrapping Up<\/h2>\n<p>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.<\/p>\n<p>If you&#8217;d like to see it all in action, download the <a href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/01\/cptt.zip\" target=\"_blank\">quick example<\/a> I made to showcase this enhancement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 4.7 has delivered some fantastic new enhancements to the CMS&#8217;s template system. Templates have now\u00a0been 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&#8217;ll show you how [&hellip;]<\/p>\n","protected":false},"author":344049,"featured_media":161910,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557,263],"tags":[9815,4993],"tutorials_categories":[],"class_list":["post-161842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-tutorials","tag-posts","tag-templates"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=161842"}],"version-history":[{"count":13,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161842\/revisions"}],"predecessor-version":[{"id":206347,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161842\/revisions\/206347"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/161910"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=161842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=161842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=161842"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=161842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}