{"id":26946,"date":"2021-07-14T17:00:58","date_gmt":"2021-07-14T15:00:58","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26946"},"modified":"2021-08-04T09:36:08","modified_gmt":"2021-08-04T07:36:08","slug":"create-wordpress-single-post-templates","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-single-post-templates\/","title":{"rendered":"How to Create Custom Single Post Templates in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]A theme\u2019s template files are the backbone of your WordPress website\u2014they serve to display various kinds of dynamic content on the website. While most WordPress users only rely on these templates and page builders to edit their content, there is another way to customize your website content. And it involves writing custom template files using code. In this article, we will discuss how you can build custom post templates specifically, and consider the potential benefits of doing so. And we\u2019ll show you how to tackle this topic by breaking it down into several smaller steps:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-create-custom-single-post-templates\">Why you would want to create custom single post templates in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#understanding-the-template-file-hierarchy\">Understanding the template file hierarchy<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-custom-single-post-templates\">Creating custom single post templates<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-create-custom-single-post-templates\"><\/a>Why you would want to create custom single post templates in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Custom post templates are best applied on specific posts that are meant to stand out from the rest of your website and wow the audience. They offer you the ability to create unique, completely custom, layouts, which can be beneficial for a wide range of websites and occasions.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, you can use custom post templates for posts that belong to a trending category or posts made by specific guest authors or contributors. Moreover, you can create specific post templates for each author on your website, making their content visually recognizable. You can even create templates for specific post types, especially if you\u2019ve added any custom post types. These are only a few examples to give you an idea of the range of possibilities offered by creating WordPress single post templates.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Simply put, custom post templates allow you to create a layout that isn\u2019t otherwise available through your theme or the use of page builder plugins. By knowing how to code them, you will gain more flexibility for customizing your website content.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to create custom single post templates in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that you have a clearer picture of the benefits involved in making custom post templates, let\u2019s take a look at how you can do so. We divided this part of the article into two sections. One covers the requirements you need to know before you start coding, and the other illustrates how a custom template can look using an example we created.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"understanding-the-template-file-hierarchy\"><\/a>Understanding the template file hierarchy<\/h3>\n<p>[\/vc_column_text][vc_column_text]As we mentioned at the start, template files are in charge of displaying various pieces of dynamic content on your website. For them to work properly, a strict <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-template-hierarchy\/\">Template Hierarchy<\/a> structure must be observed. WordPress automatically checks whether a page or post has a custom template assigned to it before using any of the template files provided by your theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the past, this was only true for pages (i.e. <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-custom-page-template\">page templates<\/a>), but the functionality was extended to posts and custom post types starting with the WordPress 4.7 update. As such, the current hierarchy for posts and custom post types is the following:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">custom page\/post template file<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">single-{post-type}-{post-slug}.php\n<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">single-{post-type}.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">single.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">singular.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">index.php<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s clarify what this means.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, the {post-type} notation represents the slug of a specific post type, while the {post-slug} represents the slug of a specific post item. The files with names that contain the {post-type} notation will only apply to custom post types, which are registered using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_type\/\" target=\"_blank\" rel=\"noopener\">register_post_type()<\/a> function. For example, if you registered a custom post type with <em>portfolio-item<\/em> as its slug, then a file within this hierarchy would be named single-portfolio-item.php.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Secondly, a custom template file is the only one that doesn\u2019t have to follow the strict naming conventions shown above. We deliberately put <em>page\/post<\/em> as part of the name to emphasize that custom template files can be written for pages, posts, and custom post types in a uniform way. This was also part of the WordPress 4.7 update that we mentioned earlier.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The reason for this flexibility of use lies in the template header, which is the first part\u2014and a mandatory one\u2014every custom template file. It serves to register the template and give some additional information about it. The template header is, in fact, a simple comment that specifies the template name which post type, or types, it was written for.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The template header has a strict structure; the relevant pieces of information are specified after the <em>Template Name<\/em>: and <em>Template Post Type<\/em>: strings. No other information is required, but if you choose to add some, it can be helpful for anyone reviewing the file. Also, since the template file has the .php extension, it has to begin with the opening PHP tag: <strong>&lt;?php<\/strong>. However, the closing PHP tag (<strong>?&gt;<\/strong>) can be placed later in the code, depending on the main content of the file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having explained that, you can see an example of how a custom template file could start below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/**\r\n* Template Name: No Sidebar Template\r\n* Template Post Type: post, page\r\n*\/<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using this template header, you can register a custom template called<em> No Sidebar Template<\/em> and make it available for both posts and pages. That means that<em> No Sidebar Template<\/em> will appear as an option both in Page Attributes on a single page, as well as in Post Attributes on a single post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"581\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Page-Template-No-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Page Template No Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Page-Template-No-Sidebar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Page-Template-No-Sidebar-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Page-Template-No-Sidebar-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Page-Template-No-Sidebar-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"625\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Post-Template-No-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Post Template No Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Post-Template-No-Sidebar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Post-Template-No-Sidebar-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Post-Template-No-Sidebar-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Post-Template-No-Sidebar-620x400.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As we are focusing on WordPress single post templates in this article, we will be setting the template post type in our example to post. Other than that, our final piece of advice on template headers would be to use self-explanatory names as it will help you avoid any possible confusion later on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, there are a few other things we need to mention before moving on to the example we made for the article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, in terms of code, there are a lot of things that could be added to a custom template file. These are all added within the second part of a template file, the one that creates the content. They include codes that display the sidebars, widgets, content inserted via the editor, custom post type meta info, and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are a lot of different layouts that can achieve using custom template files if you possess the appropriate programming skills. And even if you don\u2019t, there\u2019s no reason for you to start from scratch\u2014custom template files are most commonly made by taking an appropriate template file from your theme and modifying it to your preference.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After creating the complete template file, you should save it as a .php file and upload it to your server. Using FTP, you should place the file into one of the four appropriate places for custom template files. Those are the active parent theme directory, active child theme directory, or a subdirectory within either of those two locations.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, you should take care when naming the file. Avoid using any of the already reserved names (e.g. index, archive, single,\u2026) or names that contain an already reserved prefix (e.g. single-, archive-, page-,&#8230;). For simplicity\u2019s sake, you might want to name the file the same as the template, so you can keep track of it easily.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"creating-custom-single-post-templates\"><\/a>Creating custom single post templates<\/h3>\n<p>[\/vc_column_text][vc_column_text]In the following section, we will be discussing how to create custom post layouts using custom code. As this process requires a significant familiarity with WordPress and previous coding experience, it is more inclined towards intermediate and advanced WordPress users. We\u2019ve provided detailed explanations and helpful links to clarify the subject matter, but we urge you to do more research if you need to before proceeding.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The process of creating a WordPress single post template also requires an understanding of <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">how to use FTP<\/a>, as you\u2019ll need it for uploading the .php file to the server after you\u2019ve created the code. Also, before going further, we advise you to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">make a backup of your website<\/a> just in case.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even though the requirements for this method might seem high, the upside is significant\u2014you\u2019ll be able to make a custom post layout perfectly matched to your needs. And to help you in this process of making WordPress single post templates, we prepared a code example for this article. You can use it as is or modify it as you see fit.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, let\u2019s take a look at the code itself.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/*\r\n* Template Name: No Sidebar Post Template\r\n* Template Post Type: post\r\n*\/\r\nget_header();\r\n?&gt;\r\n&lt;main id=\"main-content\" class=\"custom-grid\"&gt;\r\n&lt;div class=\"custom-grid-inner\"&gt;\r\n&lt;?php if ( have_posts() ) {\r\nwhile ( have_posts() ) {\r\nthe_post();\r\n$author_id = get_the_author_meta( 'ID' );\r\n$author_url = get_author_posts_url( $author_id );\r\n?&gt;\r\n&lt;article &lt;?php post_class( 'custom-blog-item' ); ?&gt;&gt;\r\n&lt;div class=\"blog-item-inner\"&gt;\r\n&lt;h1 itemprop=\"name\" class=\"bi-title entry-title\"&gt;\r\n&lt;?php the_title(); ?&gt;\r\n&lt;\/h1&gt;\r\n&lt;div class=\"content-above-image\"&gt;\r\n&lt;div class=\"bi-author\"&gt;\r\n&lt;div class=\"bi-author-avatar\"&gt;\r\n&lt;a itemprop=\"url\" href=\"&lt;?php echo esc_url( $author_url ); ?&gt;\"&gt;\r\n&lt;?php echo get_avatar( $author_id, 60 ); ?&gt;\r\n&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"bi-author-name\"&gt;\r\n&lt;a itemprop=\"author\" class=\"bi-author-link\"\r\nhref=\"&lt;?php echo esc_url( $author_url ); ?&gt;\"&gt;\r\n&lt;?php the_author_meta( 'display_name' ); ?&gt;\r\n&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"bi-category\"&gt;\r\n&lt;?php the_category( ' \/ ' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"image-wrapper\"&gt;\r\n&lt;?php if ( has_post_thumbnail() ) { ?&gt;\r\n&lt;div class=\"bi-media-image\"&gt;\r\n&lt;?php the_post_thumbnail( 'full' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;div class=\"bi-date\"&gt;\r\n&lt;div itemprop=\"dateCreated\" class=\"entry-date updated\"&gt;\r\n&lt;?php the_time( get_option( 'date_format' ) ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"content-below-image\"&gt;\r\n&lt;?php if ( get_the_tags() ) { ?&gt;\r\n&lt;div class=\"bi-tags\"&gt;\r\n&lt;h5 class=\"bi-tags-label\"&gt;&lt;?php esc_html_e( 'Tags: ', 'domain_name' ); ?&gt;&lt;\/h5&gt;\r\n&lt;div class=\"bi-tags-wrapper\"&gt;\r\n&lt;?php the_tags( '', ', ', '' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;div class=\"article-text\"&gt;\r\n&lt;?php\r\n\/\/ Include post content\r\nthe_content();\r\n?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php\r\n\/\/ Previous\/next post navigation.\r\nthe_post_navigation(\r\narray(\r\n'next_text' =&gt; '&lt;span class=\"nav-label\"&gt;' . esc_html__( 'Next article', 'domain_name' ) . '&lt;\/span&gt;&lt;p class=\"next-post-title\"&gt;%title&lt;\/p&gt;',\r\n'prev_text' =&gt; '&lt;span class=\"nav-label\"&gt;' . esc_html__( 'Previous article', 'domain_name' ) . '&lt;\/span&gt;&lt;p class=\"previous-post-title\"&gt;%title&lt;\/p&gt;'\r\n)\r\n);\r\n\/\/ Include comments\r\nif ( comments_open() ) { ?&gt;\r\n&lt;div class=\"comment-section\"&gt;\r\n&lt;?php comments_template(); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/article&gt;\r\n&lt;?php } \/\/ End of the loop.\r\n}\r\nwp_reset_postdata(); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/main&gt;\r\n&lt;?php\r\nget_footer();<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To make this code easier to grasp, we\u2019ll explain its main components.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll do that by looking at a more simplified version of the code first. As you can see from the template header below, the code represents a blog post-specific template called <em>No Sidebar Post Template<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Apart from that, the code contains a tiny piece of HTML markup that wraps a <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\" target=\"_blank\" rel=\"noopener\">WordPress Loop<\/a>. The main part of the code, which specifies what is shown on a given post, is located within it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, the code contains the use of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_header\/\" target=\"_blank\" rel=\"noopener\">get_header()<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_footer\/\" target=\"_blank\" rel=\"noopener\">get_footer()<\/a> functions, which load the header and footer templates of the site\u2019s currently active theme. Besides them, we also used the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_reset_postdata\/\" target=\"_blank\" rel=\"noopener\">wp_reset_postdata()<\/a> function to reset the global $post variable to the current post in the main query.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/*\r\n* Template Name: No Sidebar Post Template\r\n* Template Post Type: post\r\n*\/\r\nget_header();\r\n?&gt;\r\n&lt;main id=\"main-content\" class=\"custom-grid\"&gt;\r\n&lt;div class=\"custom-grid-inner\"&gt;\r\n&lt;?php if ( have_posts() ) {\r\nwhile ( have_posts() ) {\r\nthe_post();\r\n\/\/ Post content code goes here\r\n} \/\/ End of the loop.\r\n}\r\nwp_reset_postdata(); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/main&gt;\r\n&lt;?php\r\nget_footer();<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, let\u2019s focus on the main part of the code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, we have defined two variables\u2014the <em>$author_id<\/em> and the <em>$author_url<\/em>. They are used to display the post author\u2019s avatar and to link it to the appropriate post author archive page. As the variable names indicate, they contain the post author\u2019s ID and URL and are created using the functions <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_the_author_meta\/\" target=\"_blank\" rel=\"noopener\">get_the_author_meta()<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_author_posts_url\/\" target=\"_blank\" rel=\"noopener\">get_author_posts_url()<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">$author_id = get_the_author_meta( 'ID' );\r\n$author_url = get_author_posts_url( $author_id );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Following that, we come to the content of every post, wrapped with an <a href=\"https:\/\/www.w3schools.com\/tags\/tag_article.asp\" target=\"_blank\" rel=\"noopener\">&lt;article&gt;<\/a> tag. First, the post title is shown using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_title\/\" target=\"_blank\" rel=\"noopener\">the_title()<\/a> function. Then there are three distinct sections\u2014the section with the post\u2019s featured image and the parts directly above and below it. If added to the post, the featured image is shown in its original size using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post_thumbnail\/\" target=\"_blank\" rel=\"noopener\">the_post_thumbnail()<\/a> function. This section also contains the post\u2019s publish date. As for the two sections surrounding it, they contain a bit more content, which we will briefly cover below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\u00a0&lt;article &lt;?php post_class( 'custom-blog-item' ); ?&gt;&gt;\r\n&lt;div class=\"blog-item-inner\"&gt;\r\n&lt;h1 itemprop=\"name\" class=\"bi-title entry-title\"&gt;\r\n&lt;?php the_title(); ?&gt;\r\n&lt;\/h1&gt;\r\n&lt;div class=\"content-above-image\"&gt;\r\n&lt;!-- Content above image code goes here --&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"image-wrapper\"&gt;\r\n&lt;?php if ( has_post_thumbnail() ) { ?&gt;\r\n&lt;div class=\"bi-media-image\"&gt;\r\n&lt;?php the_post_thumbnail( 'full' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;div class=\"bi-date\"&gt;\r\n&lt;div itemprop=\"dateCreated\" class=\"entry-date updated\"&gt;\r\n&lt;?php the_time( get_option( 'date_format' ) ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"content-below-image\"&gt;\r\n&lt;!-- Content below image code goes here --&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/article&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The section above the image contains two distinct parts. The first is the author\u2019s avatar image and name. The second is a list of categories, separated with a forward slash (\/), that the post belongs to. Additionally, both the author\u2019s avatar image and name link to the author archive page, and the categories link to their respective category archive pages.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div class=\"content-above-image\"&gt;\r\n&lt;div class=\"bi-author\"&gt;\r\n&lt;div class=\"bi-author-avatar\"&gt;\r\n&lt;a itemprop=\"url\" href=\"&lt;?php echo esc_url( $author_url ); ?&gt;\"&gt;\r\n&lt;?php echo get_avatar( $author_id, 60 ); ?&gt;\r\n&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"bi-author-name\"&gt;\r\n&lt;a itemprop=\"author\" class=\"bi-author-link\"\r\nhref=\"&lt;?php echo esc_url( $author_url ); ?&gt;\"&gt;\r\n&lt;?php the_author_meta( 'display_name' ); ?&gt;\r\n&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"bi-category\"&gt;\r\n&lt;?php the_category( ' \/ ' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the section below the featured image, it contains four distinct parts. The first among them is the <em>Tags<\/em>: label followed by a list of tags, which are separated with commas(,) that the post belongs to. Next, the part that can be directly edited using your page builder\/editor of choice is added to the post, using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener\">the_content()<\/a> function. Then, using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post_navigation\/\" target=\"_blank\" rel=\"noopener\">the_post_navigation()<\/a> function, the default WordPress post navigation for Previous\/Next post is added. We also specified the HTML markup of the Previous\/Next links. And, if the post has comments enabled, a comment template will be displayed at the end of the post, using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_template\/\" target=\"_blank\" rel=\"noopener\">comments_template()<\/a> function. Finally, according to WordPress standards, we properly <a href=\"https:\/\/developer.wordpress.org\/themes\/theme-security\/data-sanitization-escaping\/\" target=\"_blank\" rel=\"noopener\">sanitized<\/a> the code in various places throughout it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div class=\"content-below-image\"&gt;\r\n&lt;?php if ( get_the_tags() ) { ?&gt;\r\n&lt;div class=\"bi-tags\"&gt;\r\n&lt;h5 class=\"bi-tags-label\"&gt;&lt;?php esc_html_e( 'Tags: ', 'domain_name' ); ?&gt;&lt;\/h5&gt;\r\n&lt;div class=\"bi-tags-wrapper\"&gt;\r\n&lt;?php the_tags( '', ', ', '' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;div class=\"article-text\"&gt;\r\n&lt;?php\r\n\/\/ Include post content\r\nthe_content();\r\n?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php\r\n\/\/ Previous\/next post navigation.\r\nthe_post_navigation(\r\narray(\r\n'next_text' =&gt; '&lt;span class=\"nav-label\"&gt;' . esc_html__( 'Next article', 'domain_name' ) . '&lt;\/span&gt;&lt;p class=\"next-post-title\"&gt;%title&lt;\/p&gt;',\r\n'prev_text' =&gt; '&lt;span class=\"nav-label\"&gt;' . esc_html__( 'Previous article', 'domain_name' ) . '&lt;\/span&gt;&lt;p class=\"previous-post-title\"&gt;%title&lt;\/p&gt;'\r\n)\r\n);\r\n\/\/ Include comments\r\nif ( comments_open() ) { ?&gt;\r\n&lt;div class=\"comment-section\"&gt;\r\n&lt;?php comments_template(); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With this, we covered all the major components of the code example prepared for the article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>As we mentioned in the previous section, to use this code, you will need to save it as a .php file and upload it to your server, into one of the four appropriate locations. Afterward, you will need to edit one of your posts, assign the <em>No Sidebar Post Template<\/em> to it, and review the results.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even though most of the hard work is already done, at this point you might need some additional CSS code for stylization purposes. This is a principle that also applies when you\u2019re adding a new feature or functionality using custom code snippets.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]CSS code used for stylization is made on a case-by-case basis. As such, we can\u2019t provide you with an example that would apply to all WordPress websites. Instead, you need to create the appropriate CSS code on your own, so that you are sure it will match your current website design.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Below, you can find the CSS we created for our new WordPress single post template. We have to caution you one last time against simply copy-pasting it as there are no guarantees that this style will fit with your site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#main-content{\r\npadding: 10px 0 30px;\r\n}\r\n.content-above-image {\r\nposition: relative;\r\nmargin-bottom: 20px;\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-align: center;\r\n-ms-flex-align: center;\r\nalign-items: center;\r\n-webkit-box-pack: justify;\r\n-ms-flex-pack: justify;\r\njustify-content: space-between;\r\n}\r\n.bi-author{\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-align: center;\r\n-ms-flex-align: center;\r\nalign-items: center;\r\nfont-size: 18px;\r\n}\r\n.bi-author-avatar img{\r\nborder-radius: 50px;\r\n-ms-flex-negative: 0;\r\nflex-shrink: 0;\r\nmargin-right: 15px;\r\n}\r\n.image-wrapper {\r\nposition: relative;\r\n}\r\n.bi-date {\r\nposition: absolute;\r\ntop: 16px;\r\nleft: 16px;\r\npadding: 12px;\r\ncolor: #000;\r\nfont-size: 18px;\r\nbackground: #fcd4d2;\r\n}\r\n.bi-tags {\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-align: center;\r\n-ms-flex-align: center;\r\nalign-items: center;\r\n-webkit-box-pack: center;\r\n-ms-flex-pack: center;\r\njustify-content: center;\r\n}\r\n.bi-tags-wrapper{\r\npadding-left: 18px;\r\n}\r\nnav.navigation.post-navigation {\r\nmargin-top: 40px;\r\n}\r\n.nav-links{\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-pack: justify;\r\n-ms-flex-pack: justify;\r\njustify-content: space-between;\r\ntext-align: center;\r\npadding: 12px 0;\r\nbackground: #f7f7f7;\r\n}\r\n.nav-previous, .nav-next {\r\npadding: 8px 15px;\r\nbackground: #fcd4d2;\r\nborder-radius: 20px;\r\n}\r\n.nav-previous p, .nav-next p {\r\nmargin: 0;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]CSS code like this can be added via your dashboard in Appearance &gt; Customize &gt; Additional CSS. Alternatively, you can insert it using a WordPress plugin that allows you to add CSS snippets; but make sure to test the plugin first to verify that there are no compatibility issues with your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Our more advanced readers can also add the CSS code by putting it in a separate .css file, uploading it to the server, and enqueueing it using <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a>. For more information on this topic, you can take a look at our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\">enqueueing custom scripts and stylesheets<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, after adding all the code, we need to review the result. You can see ours on the screenshots below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"665\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template.jpg\" class=\"attachment-full size-full\" alt=\"Result Post Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-768x527.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-620x425.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"607\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-2.jpg\" class=\"attachment-full size-full\" alt=\"Result Post Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-2-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-2-768x481.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Result-Post-Template-2-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Custom post templates can help you achieve tailor-made designs that otherwise wouldn\u2019t be possible using only templates provided by your theme or with page builders. Knowing how to create WordPress single post templates can help your blog to stand out and be more engaging for your readers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Custom template files can be made relatively easily by adding a template header and the appropriate code for displaying the main content. To help you along with this process, we designed an example single post template and shared its code, and took care to explain it along the way. Also, we touched on the potential stylization your new template might require and the methods for adding it to your site. Given all of that, we are confident that you will be able to create your own custom WordPress single post template.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Bring a whole new level of customization to your site with WordPress single post templates. Check out our guide and learn how to create and style templates.<\/p>\n","protected":false},"author":11229,"featured_media":26993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[21,73,4,13],"class_list":["post-26946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-php","tag-templates","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26946"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26946\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26993"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}