{"id":10750,"date":"2019-09-28T15:30:03","date_gmt":"2019-09-28T10:00:03","guid":{"rendered":"https:\/\/www.the-next-tech.com\/?p=10750"},"modified":"2019-09-30T09:39:17","modified_gmt":"2019-09-30T04:09:17","slug":"2-ways-to-create-custom-single-post-template-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.the-next-tech.com\/development\/2-ways-to-create-custom-single-post-template-in-wordpress\/","title":{"rendered":"2 Ways to Create Custom Single Post Template in WordPress"},"content":{"rendered":"<p>Many people feel that using a readymade WordPress theme restricts them to that product\u2019s pre-defined design. While this may be true to a certain extent, it is not that you cannot make any changes to your website according to your wishes.<\/p>\n<p>In this guide, we are discussing ways to create a\u00a0custom single post template post in WordPress. Some of you will be wondering why anyone would need a custom single post layout. Let\u2019s say you want to highlight a single post or post type in the same category of your blog. Now in order to do this, you will have to apply changes to the styling or the content. Creating a custom single post allows you to define a design that can be applied to specific posts in the future as well. Let\u2019s see how you can easily create such templates easily.<\/p>\n<p><strong>Related:<\/strong> &#8211;\u00a0<a href=\"https:\/\/www.the-next-tech.com\/development\/top-5-best-benefits-of-wordpress-development-for-business-sites\/\">Top 5 best Benefits of WordPress Development for Business Sites<\/a><\/p>\n<h2>1. Creating A Custom Single Post Template Manually<\/h2>\n<p>First, we will see how you can create the custom layout manually through coding. This method will be suitable for people who possess technical knowledge and are familiar with WordPress customization\u00a0and development. You can use the following steps to build the template manually.<\/p>\n<h4>i. Create Your Template\u2019s File<\/h4>\n<p>People who are interested in using this process must ensure that they apply the changes to their website through a child theme. This will future-proof their modifications and ensure that they can use them anytime. We will now create a file for the new template. Use an editor to create an empty file and name it as new-template.php. Copy the code shown below and paste it in the file.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10752 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184506\/create-custom-single-post-template-wp-1.png\" alt=\"\" width=\"293\" height=\"136\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184506\/create-custom-single-post-template-wp-1.png 293w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184506\/create-custom-single-post-template-wp-1-20x8.png 20w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184506\/create-custom-single-post-template-wp-1-30x13.png 30w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><\/p>\n<p>Here we have defined a new template which is also called \u201cNew Template\u201d. You can insert your preferred name in the Template Name section. This layout can be used for posts and the header will be called through a hook. Now, this file is empty and therefore we will add the content of the existing single template file of your theme. Connect to your website through an FTP client and locate your child theme folder. In the folder, find the single.php file and open it.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10753 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184502\/create-custom-single-post-template-wp-2.png\" alt=\"wordpress Customization\" width=\"640\" height=\"340\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184502\/create-custom-single-post-template-wp-2.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184502\/create-custom-single-post-template-wp-2-300x159.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Copy the code below the \u201cget_header(); ?&gt;\u201d part. Now paste the copied code in your new-template.php file after \u201cget_header(); ?&gt;\u201d. It will look like the code shown below.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10755 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184453\/create-custom-single-post-template-wp-3.png\" alt=\"\" width=\"844\" height=\"548\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184453\/create-custom-single-post-template-wp-3.png 844w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184453\/create-custom-single-post-template-wp-3-300x195.png 300w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184453\/create-custom-single-post-template-wp-3-768x499.png 768w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184453\/create-custom-single-post-template-wp-3-27x17.png 27w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><\/p>\n<p>You can make the changes to the code to define the appearance of the new layout. Save the file and move to the next step.<\/p>\n<p><strong>Related:<\/strong> &#8211;\u00a0<a href=\"https:\/\/www.the-next-tech.com\/development\/are-you-blogger-do-you-looking-out-for-a-fast-and-secure-plugins-of-wordpress\/\">Are You Blogger, Do You Looking Out For A Fast And Secure Plugins Of WordPress?<\/a><\/p>\n<h4>ii. Upload The File To The Child Theme Folder<\/h4>\n<p>Access your child theme folder and upload the file to it through FTP. Open a post or page in your installation. In the Post Attributes meta box, you will find the new option \u201cNew Template\u201d along with the Default Template. Your custom single post template is now successfully added to your installation.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10756 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184449\/create-custom-single-post-template-wp-4.png\" alt=\"Add New Post \u2039 The Next Tech \u2014 WordPress\" width=\"457\" height=\"375\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184449\/create-custom-single-post-template-wp-4.png 457w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184449\/create-custom-single-post-template-wp-4-300x246.png 300w\" sizes=\"(max-width: 457px) 100vw, 457px\" \/><\/p>\n<h2>2. Creating A Custom Single Post With A Page Builder<\/h2>\n<p>We will now build a\u00a0custom single post template post in WordPress\u00a0with a page builder. A page builder is a handy tool that allows users to create their layouts without any coding.<\/p>\n<h3>i. Install The Elementor Pro Plugin<\/h3>\n<p>The builder that we have chosen for this tutorial is called the Elementor Pro. An open-source version of this plugin is also available but the premium variant has the Theme Builder which we need for our purpose. You can purchase the product from its developer website. Then access your dashboard and go to Plugins &gt; Add New. Press the Upload Plugin button to upload the zip file in which you received the tool. Activate it on your website and move to the next step.<\/p>\n<h3>ii. Add A New Template<\/h3>\n<p>Go to Elementor &gt; My Templates in your control panel. Press the Add New Template link and you will be directed to another screen.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10757 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184446\/create-custom-single-post-template-wp-5.png\" alt=\"WordPress Customization\" width=\"640\" height=\"204\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184446\/create-custom-single-post-template-wp-5.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184446\/create-custom-single-post-template-wp-5-300x96.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Here, in the Choose Template Type, select the Single option from the dropdown. If you want, you can enter a name for your layout as well. Hit the Create Template button.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10758 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184442\/create-custom-single-post-template-wp-6.png\" alt=\"html to wordpress \" width=\"612\" height=\"402\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184442\/create-custom-single-post-template-wp-6.png 612w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184442\/create-custom-single-post-template-wp-6-300x197.png 300w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184442\/create-custom-single-post-template-wp-6-27x17.png 27w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/p>\n<h3>iii. Select A Layout<\/h3>\n<p>The tool will now ask you to choose a layout for your template from some existing options. This is a handy feature for non-technical users who do not want to build everything from scratch. People who want to build a completely new design can close this window to generate the new layout. In this tutorial, we will choose an existing template. Hover the cursor over an option and then hit the Insert link.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10759 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184437\/create-custom-single-post-template-wp-7.png\" alt=\"WordPress Theme Customization\" width=\"640\" height=\"413\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184437\/create-custom-single-post-template-wp-7.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184437\/create-custom-single-post-template-wp-7-300x194.png 300w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184437\/create-custom-single-post-template-wp-7-27x17.png 27w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<h3>iv. Modify The Template<\/h3>\n<p>Elementor will now open the selected layout in the editor. On the left-hand side, you will find widgets and content options. These items can be easily dragged and dropped on to the template on the right.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10760 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184433\/create-custom-single-post-template-wp-8.png\" alt=\"\" width=\"640\" height=\"313\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184433\/create-custom-single-post-template-wp-8.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184433\/create-custom-single-post-template-wp-8-300x147.png 300w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184433\/create-custom-single-post-template-wp-8-20x9.png 20w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>You can click on element to open its settings panel to modify each section of the page. Press the eye icon in the bottom part of the control panel. Choose Settings and include the Preview Settings option to your menu. You can use this feature to check the appearance of your layout.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10761 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184429\/create-custom-single-post-template-wp-9.png\" alt=\"\" width=\"640\" height=\"277\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184429\/create-custom-single-post-template-wp-9.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184429\/create-custom-single-post-template-wp-9-300x130.png 300w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184429\/create-custom-single-post-template-wp-9-20x8.png 20w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184429\/create-custom-single-post-template-wp-9-30x13.png 30w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184429\/create-custom-single-post-template-wp-9-80x34.png 80w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<h3>v. Publish The Template<\/h3>\n<p>Once you have made all the changes, hit the Publish button. The plugin will now ask you to define the conditions to apply the layout.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10762 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184425\/create-custom-single-post-template-wp-10.png\" alt=\"\" width=\"640\" height=\"429\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184425\/create-custom-single-post-template-wp-10.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184425\/create-custom-single-post-template-wp-10-300x201.png 300w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184425\/create-custom-single-post-template-wp-10-27x17.png 27w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Users enjoy the flexibility to determine the conditions according to their preferences. They can select the template to be used for individual posts or exclude items that contain certain tags.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-10763 aligncenter\" src=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184421\/create-custom-single-post-template-wp-11.png\" alt=\"\" width=\"640\" height=\"183\" srcset=\"https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184421\/create-custom-single-post-template-wp-11.png 640w, https:\/\/s3.amazonaws.com\/static.the-next-tech.com\/wp-content\/uploads\/2019\/09\/19184421\/create-custom-single-post-template-wp-11-300x86.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Your custom single post is now ready and will be used according to your specified conditions.<\/p>\n<h2>Conclusion<\/h2>\n<p>WordPress\u2019 open-source and popular nature means that you can access various resources to fulfill your requirements. If this tutorial seems too complex to you, then you can easily find a <a href=\"https:\/\/www.hirewpgeeks.com\/services\/custom-wordpress-development\/\" target=\"_blank\" rel=\"noopener\"><u>WordPress template customization<\/u><\/a>\u00a0specialist to build a custom post template for you.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many people feel that using a readymade WordPress theme restricts them to that product\u2019s pre-defined design. While this may be<\/p>\n","protected":false},"author":332,"featured_media":10921,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[133],"tags":[357,354,356,353,355],"_links":{"self":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/10750"}],"collection":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/users\/332"}],"replies":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/comments?post=10750"}],"version-history":[{"count":6,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/10750\/revisions"}],"predecessor-version":[{"id":10928,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/10750\/revisions\/10928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/media\/10921"}],"wp:attachment":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/media?parent=10750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/categories?post=10750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/tags?post=10750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}