{"id":139769,"date":"2018-06-19T11:00:10","date_gmt":"2018-06-19T16:00:10","guid":{"rendered":"https:\/\/getflywheel.com\/?p=27592"},"modified":"2024-09-29T12:30:22","modified_gmt":"2024-09-29T17:30:22","slug":"create-custom-single-post-templates-wordpress-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/","title":{"rendered":"How to Create Custom WordPress Single-Post Templates"},"content":{"rendered":"\n

Have you ever seen a post details page with a completely different layout from other posts on the same site? That\u2019s probably because it\u2019s using a custom template. You can assign a custom template to individual posts, giving you increased flexibility over the appearance of your site.<\/p>\n\n\n\n

Interested in learning how to create a custom single-post template? In this post, we’ll show you how you can easily create your own!<\/p>\n\n\n\n\n\n

Maximize your website with custom WordPress post templates<\/h2>\n\n\n\n

Before we start creating one, let’s explore why you might need a custom template and what it does.<\/p>\n\n\n\n

If you want a particular post or post type to stand out from the rest of your content, you may want to consider creating a custom single-post template. This template will only be applied to the post(s) you assign it to, meaning it can have an entirely different layout than your standard posts. A unique design and layout can then increase user engagement for that particular post.<\/p>\n\n\n\n

Ready to develop your own? Creating and using a custom post template is similar to a custom page template.<\/p>\n\n\n\n

\"Web<\/figure>\n\n\n\n

Creating a customized WordPress post template: A step-by-step guide<\/h2>\n\n\n\n

We will be using the Twenty Seventeen theme<\/a> for this example, but the process will be the same for any theme.<\/p>\n\n\n\n

Before creating a custom post template, we will create a child theme first. You can work in the main theme, but since you\u2019re creating a custom template, if you update the parent theme you\u2019ll lose your template. For this reason, it\u2019s good practice to keep your custom templates separate from the main theme.<\/p>\n\n\n\n

For a custom template, you have to define a Template Name (the name of the template) and a Template Post Type (where this template will be used). It looks like this:<\/p>\n\n\n\n

[php]\n&amp;amp;lt;?php\n\/* Template Name: Full Width Post * Template Post Type: post*\/ \/*The template for displaying full width single posts. *\/\nget_header( );\n?&amp;amp;gt;\n[\/php]<\/pre>\n\n\n\n
When you save the file, keep the file name relevant to the template name, like full-width-post.php<\/code>. If you view a post from the admin panel, it will show the new template in a dropdown of the Post Attributes section.<\/p>\n\n\n\n
\"Guide<\/figure>\n\n\n\n
Our custom template is ready, but it’s not useful yet. Let\u2019s make it a bit more beneficial!<\/p>\n\n\n\n
Note: We\u2019ll be working on multiple files, so keep track of the file names and folders.<\/strong><\/p>\n\n\n\n
Here\u2019s the current layout of blog post pages in the Twenty Seventeen theme. We’re happy with that, so we\u2019ll leave it be.<\/p>\n\n\n\n
\"Optimized<\/figure>\n\n\n\n
Now, let\u2019s say you want a full-width layout for a few posts. We\u2019ll put the post title above the meta data. The meta data should have a border at the top and bottom, and both the title and meta data should be centered aligned. Here\u2019s the wireframe:<\/p>\n\n\n\n
\"Wordpress<\/figure>\n\n\n\n
To make this layout, you need to find which file is responsible for displaying post details pages. In most themes, single.php<\/code> is the file, unless there are certain predefined templates. The code structure varies from theme to theme, so it may take a little learning to understand how your particular theme works.<\/p>\n\n\n\n
Once you\u2019ve found the file that displays post details pages, you should find if a function is used to call another file or the template is created directly. In this example with the Twenty Seventeen theme, it\u2019s get_template_part<\/a> function.<\/p>\n\n\n\n
The get_template_part<\/code> path is the most important part to follow here.<\/p>\n\n\n\n
[php]\n\n&amp;amp;lt;div class=&quot;wrap&quot;&amp;amp;gt;\n\n&amp;amp;lt;div id=&quot;primary&quot; class=&quot;content-area&quot;&amp;amp;gt;\n        \t&amp;amp;lt;main id=&quot;main&quot; class=&quot;site-main&quot; role=&quot;main&quot;&amp;amp;gt;\n              \t&amp;amp;lt;?php \/* Start the Loop *\/ while ( have_posts() ) : the_post(); get_template_part( 'template-parts\/post\/content', get_post_format() ); \/\/ If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' =&amp;amp;gt; '&amp;amp;lt;span class=&quot;screen-reader-text&quot;&amp;amp;gt;' . __( 'Previous Post', 'twentyseventeen' ) . '&amp;amp;lt;\/span&amp;amp;gt;&amp;amp;lt;span aria-hidden=&quot;true&quot; class=&quot;nav-subtitle&quot;&amp;amp;gt;' . __( 'Previous', 'twentyseventeen' ) . '&amp;amp;lt;\/span&amp;amp;gt; &amp;amp;lt;span class=&quot;nav-title&quot;&amp;amp;gt;&amp;amp;lt;span class=&quot;nav-title-icon-wrapper&quot;&amp;amp;gt;' . twentyseventeen_get_svg( array( 'icon' =&amp;amp;gt; 'arrow-left' ) ) . '&amp;amp;lt;\/span&amp;amp;gt;%title&amp;amp;lt;\/span&amp;amp;gt;',\n                          \t'next_text' =&amp;amp;gt; '&amp;amp;lt;span class=&quot;screen-reader-text&quot;&amp;amp;gt;' . __( 'Next Post', 'twentyseventeen' ) . '&amp;amp;lt;\/span&amp;amp;gt;&amp;amp;lt;span aria-hidden=&quot;true&quot; class=&quot;nav-subtitle&quot;&amp;amp;gt;' . __( 'Next', 'twentyseventeen' ) . '&amp;amp;lt;\/span&amp;amp;gt; &amp;amp;lt;span class=&quot;nav-title&quot;&amp;amp;gt;%title&amp;amp;lt;span class=&quot;nav-title-icon-wrapper&quot;&amp;amp;gt;' . twentyseventeen_get_svg( array( 'icon' =&amp;amp;gt; 'arrow-right' ) ) . '&amp;amp;lt;\/span&amp;amp;gt;&amp;amp;lt;\/span&amp;amp;gt;',\n                    \t) );\n              \tendwhile; \/\/ End of the loop.\n              \t?&amp;amp;gt;\n[\/php]<\/code><\/pre>\n\n\n\n
As you can see, it’s referring to a path:<\/p>\n\n\n\n
[php]\nget_template_part( 'template-parts\/post\/content', get_post_format()\n);\n[\/php]<\/code><\/pre>\n\n\n\n
\"Customizing<\/figure>\n\n\n\n
So the content.php<\/code> file is called inside single.ph<\/code> to output the post details page.<\/p>\n\n\n\n
Now that you know how the single.php<\/code> file is working, let’s copy the code from it and paste it into our previously created full-width-post.php<\/code> file in the child theme. Since it will be a full-width template, we\u2019ll remove the sidebar.<\/p>\n\n\n\n
\"Highlighted<\/figure>\n\n\n\n
Now copy the content.php file from the above-mentioned path. You can paste it in the same directory where your template file exists, but I\u2019d suggest following the same folder structure as the parent theme.<\/p>\n\n\n\n
You can keep the file name as it is, but if you ever wish to change something in the default template it\u2019ll cause a conflict. To avoid any issues, I\u2019d suggest renaming the file and keeping it relevant to the template name, such as content-full-width.php<\/code>.<\/p>\n\n\n\n
\"Customized<\/figure>\n\n\n\n
The files are in place, so now let’s modify the code to swap the post title and post meta data.<\/p>\n\n\n\n
[php]\n\n&amp;amp;lt;header class=&quot;entry-header&quot;&amp;amp;gt;\n        \t&amp;amp;lt;?php\n\n        \tif ( is_single() ) {\n              \tthe_title( '\n\n&amp;amp;lt;h1 class=&quot;entry-title&quot;&amp;amp;gt;', '&amp;amp;lt;\/h1&amp;amp;gt;\n\n' );\n        \t} elseif ( is_front_page() &amp;amp;amp;&amp;amp;amp; is_home() ) {\n              \tthe_title( '\n\n&amp;amp;lt;h3 class=&quot;entry-title&quot;&amp;amp;gt;&amp;amp;lt;a href=&quot;' . esc_url( get_permalink() ) . '&quot; rel=&quot;bookmark&quot;&amp;amp;gt;', '&amp;amp;lt;\/a&amp;amp;gt;&amp;amp;lt;\/h3&amp;amp;gt;\n\n' );\n        \t} else {\n              \tthe_title( '\n\n&amp;amp;lt;h2 class=&quot;entry-title&quot;&amp;amp;gt;&amp;amp;lt;a href=&quot;' . esc_url( get_permalink() ) . '&quot; rel=&quot;bookmark&quot;&amp;amp;gt;', '&amp;amp;lt;\/a&amp;amp;gt;&amp;amp;lt;\/h2&amp;amp;gt;\n\n' );\n        \t}\n\n        \tif ( 'post' === get_post_type() ) {\n\n              \techo '\n\n&amp;amp;lt;div class=&quot;entry-meta&quot;&amp;amp;gt;';\n                    \tif ( is_single() ) {\n                    \t  \ttwentyseventeen_posted_on();\n                    \t} else {\n                          \techo twentyseventeen_time_link();\n                          \ttwentyseventeen_edit_link();\n                    \t};\n              \techo '&amp;amp;lt;\/div&amp;amp;gt;\n\n&amp;amp;lt;!-- .entry-meta --&amp;amp;gt;';\n        \t};\n        \t?&amp;amp;gt;\n  \t&amp;amp;lt;\/header&amp;amp;gt;\n\n&amp;amp;lt;!-- .entry-header --&amp;amp;gt;\n[\/php]<\/pre>\n\n\n\n
To use this template, edit the desired post from the WordPress admin and assign the template from the dropdown menu.<\/p>\n\n\n\n
\"Choosing<\/figure>\n\n\n\n
If you check the post on the front end, it’s still not full-width, but the title and meta data have swapped places, so we know that the post is using our custom template<\/p>\n\n\n\n
\"Complete<\/figure>\n\n\n\n
We have to add some CSS to make it full width. WordPress auto generates a class as per the template name in the body section.<\/p>\n\n\n\n
\"Comprehensive<\/figure>\n\n\n\n
Use that class to target this particular template. You can add the CSS to the child theme style.css<\/code> file.<\/p>\n\n\n\n
[css]\n.post-template-full-width-post.has-sidebar:not(.error404) #primary{\nfloat:none;\nwidth:auto;\n}\n\n.post-template-full-width-post .entry-header{\ntext-align:center;\nmargin-bottom:1.3em;\n}\n\n.post-template-full-width-post .entry-meta{\nborder-top:1px solid #ccc;\nborder-bottom:1px solid #ccc;\npadding:15px 0;\n}\n[\/css]<\/pre>\n\n\n\n
Now we have the layout as we wanted. Any post using this template will have this exact same style.<\/p>\n\n\n\n
\"Comprehensive<\/figure>\n\n\n\n
You can create as many custom templates as you want to fit your requirements. You can even create Custom WordPress Post Templates<\/a>.<\/p>\n\n\n\n
Utilizing WordPress post templates: Do I need a plugin?<\/h2>\n\n\n\n
If you are not comfortable with PHP codes, then you can use some plugins, however, there are very few plugins available for creating custom post templates and most of them are not very useful because you have to manually create the template anyway.<\/p>\n\n\n\n
That said, the Post Custom Templates Lite<\/a> plugin is quite useful. It\u2019s a free plugin that allows you to create post templates without any coding in a nice drag-and-drop interface. It has lots of customization options, so if you want to customize a post template, in general, this plugin can help you out.<\/p>\n\n\n\n
Note: The free version only allows you to customize normal post templates. You have to use the pro version to be able to create custom post templates and get some additional features.<\/p>\n\n\n\n
\"man<\/figure>\n\n\n\n
Final thoughts on enhancing your site with WordPress post templates<\/h2>\n\n\n\n
Whether you work manually or use a plugin to create a custom single-post template, it allows your most important posts to stand out from the rest. For inspiration, check out Brian Dean’s<\/a> site; he uses a particular template for his definitive guide posts to make them look unique from the rest of his posts.<\/p>\n\n\n\n
So, give it a try and create your own unique single-post template! To get the best results for every site you build, choose WP Engine’s hosting platform<\/a> for WordPress sites!<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever seen a post details page with a completely different layout from other posts on the same site? That\u2019s probably because it\u2019s using a custom template. You can assign a custom template to individual posts, giving you increased flexibility over the appearance of your site. Interested in learning how to create a custom…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":139957,"template":"","resource-topic":[901],"resource-role":[1296,899],"resource-type":[916],"class_list":["post-139769","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nCreating WordPress Post Templates: A Step-by-Step Guide<\/title>\n<meta name=\"description\" content=\"Explore expert guidance on creating your own WordPress post template. Learn to design unique custom single-post templates with ease and efficiency.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating WordPress Post Templates: A Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"Explore expert guidance on creating your own WordPress post template. Learn to design unique custom single-post templates with ease and efficiency.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-29T17:30:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/06\/Untitled-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/\",\"name\":\"Creating WordPress Post Templates: A Step-by-Step Guide\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2018-06-19T16:00:10+00:00\",\"dateModified\":\"2024-09-29T17:30:22+00:00\",\"description\":\"Explore expert guidance on creating your own WordPress post template. Learn to design unique custom single-post templates with ease and efficiency.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Custom WordPress Single-Post Templates\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating WordPress Post Templates: A Step-by-Step Guide","description":"Explore expert guidance on creating your own WordPress post template. Learn to design unique custom single-post templates with ease and efficiency.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Creating WordPress Post Templates: A Step-by-Step Guide","og_description":"Explore expert guidance on creating your own WordPress post template. Learn to design unique custom single-post templates with ease and efficiency.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-09-29T17:30:22+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/06\/Untitled-design.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/","name":"Creating WordPress Post Templates: A Step-by-Step Guide","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2018-06-19T16:00:10+00:00","dateModified":"2024-09-29T17:30:22+00:00","description":"Explore expert guidance on creating your own WordPress post template. Learn to design unique custom single-post templates with ease and efficiency.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-single-post-templates-wordpress-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create Custom WordPress Single-Post Templates"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/06\/Untitled-370-\u00d7-250-px-1.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Publisher, Site Owner","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/139957"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139769"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139769"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139769"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}