{"id":62811,"date":"2011-11-07T10:30:48","date_gmt":"2011-11-07T15:30:48","guid":{"rendered":"http:\/\/wpmu.org\/?p=62811"},"modified":"2022-04-27T03:04:51","modified_gmt":"2022-04-27T03:04:51","slug":"wordpress-custom-post-template-plugin-style-individual-posts","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-custom-post-template-plugin-style-individual-posts\/","title":{"rendered":"Give Individual Posts a Unique Style with WordPress Custom Post Templates"},"content":{"rendered":"<p>With the introduction of format types in WordPress, the ability to post \u201cLink\u201d posts or \u201cGallery\u201d posts , etc. became something you could do out of the box.<\/p>\n<p>But if you\u2019ve ever wanted to give different posts a style of your own, there are a couple ways to accomplish this\u2014with a bit of custom coding, or by using a plugin.<\/p>\n<p>We\u2019ll look at both in this post.<\/p>\n<p>Continue reading, or use the links below to jump to any section:<\/p>\n<ul>\n<li><a href=\"#create-code\">Create a Custom Post Template with Code<\/a>\n<ul>\n<li><a href=\"#create-post\">Create a New Post Using a Template<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#use-plugin\">Create a Custom Post Template with a Plugin<\/a><\/li>\n<li><a href=\"#summary\">Post-it Notes<\/a><\/li>\n<\/ul>\n<p>First up, let&#8217;s\u2026<\/p>\n<h2><a id=\"create-code\" target=\"_blank\"><\/a>Create A Custom Post Template With Code<\/h2>\n<p>1. It\u2019s a good idea to make a copy of your site before fiddling with files and code, so go ahead and do a quick backup now.<\/p>\n<p>A good host will likely have a built-in backup feature that you can avail yourself of. If you host with WPMUDEV, you can run a quick backup through <a href=\"https:\/\/wpmudev.com\/hub-welcome\/\" target=\"_blank\">The HUB<\/a>. Alternately, you could use a plugin (we recommend <a href=\"https:\/\/wpmudev.com\/project\/snapshot\/\" target=\"_blank\">Snapshot Pro<\/a>).<\/p>\n<figure id=\"attachment_209522\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209522\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/backup-in-the-Hub.png\" alt=\"Backup files in the Hub\" width=\"600\" height=\"169\" \/><figcaption class=\"wp-caption-text\">Push-of-a-button backups via WMUDEV\u2019s The Hub Interface.<\/figcaption><\/figure>\n<p>2. Access your WordPress site files, either on your own server, or through your host access point.<\/p>\n<figure id=\"attachment_209510\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-209510 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/the-hub-view-edit-files-1.png\" alt=\"The Hub, view-edit files\" width=\"600\" height=\"370\" \/><figcaption class=\"wp-caption-text\">Accessing WP site files through WPMUDEV\u2019s Hub is a swift, streamlined experience.<\/figcaption><\/figure>\n<p>3. Navigate to: <strong>Files &gt; wp-content &gt; themes &gt; twentytwenty<\/strong> (or whatever theme you\u2019ll be using)&#8230; and locate the <em>single.php<\/em> or <em>singular.php<\/em> file.<\/p>\n<p>4. Make a copy of this file, then rename it. I\u2019m going to call mine: <em>jbtest.php<\/em>.<\/p>\n<figure id=\"attachment_209521\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209521\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/duplicaterename-php-file.png\" alt=\"Duplicate &amp; rename a php file in WP\" width=\"600\" height=\"436\" \/><figcaption class=\"wp-caption-text\">Creating and editing a php file in WordPress.<\/figcaption><\/figure>\n<p>5. Now we need to move this file into the <strong>templates <\/strong>subfolder (under <strong>twentytwenty<\/strong>).<\/p>\n<p>You\u2019ll note that the files already populated here are preceded by <em>\u201ctemplate\u2013\u201d<\/em>, so we&#8217;ll rename the file again to match that convention, making mine: <em>template-jbtest.php<\/em>.<\/p>\n<figure id=\"attachment_209512\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209512\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/add-edit-php-file.png\" alt=\"Creating and editing a php file in WordPress.\" width=\"600\" height=\"295\" \/><figcaption class=\"wp-caption-text\">This is how the folder and files look at this point.<\/figcaption><\/figure>\n<p>Now that the file is named appropriately and in the correct folder, we need to edit the contents so it\u2019s coded as a template.<\/p>\n<p>6.\u00a0 Go into editing mode (right-click the file, and choose Edit text), and at the very top of the code, add the following:<\/p>\n<p><code>&lt;?php<\/code><br \/>\n<code>\/*<\/code><br \/>\n<code>* Template Name: JBTest<\/code><br \/>\n<code>* Template Post Type: post, page<\/code><br \/>\n<code>*\/<\/code><br \/>\n<code>?&gt;<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/insert-templatename-code-php-file.png\" alt=\"Pasting the template code into the PHP file.\" width=\"600\" height=\"378\" \/><\/p>\n<p>Where the code reads \u201cTemplate Name Posts: <em>JBTest<\/em>\u201d, use whatever name you like (in place of <em>JBTest<\/em>).<\/p>\n<p>Note: Make sure each line of this top level code is on its own row. (It may display in a single line when you paste it.)<\/p>\n<p>7. Change the rest of the file in whatever way you like, to make it your own. Make sure to click \u201cSave &amp; Close\u201d after completing the edit.<\/p>\n<figure id=\"attachment_209514\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-209514 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/insert-test-text-php-file.png\" alt=\"Insert test text php file\" width=\"600\" height=\"385\" \/><figcaption class=\"wp-caption-text\">I added some random \u201ctesting\u201d text further below, as a visual validation that the code worked.<\/figcaption><\/figure>\n<h3><a id=\"create-post\" target=\"_blank\"><\/a>Create a New Post Using a Template<\/h3>\n<p>Let\u2019s create a new post, so we can test out the template we just made.<\/p>\n<p>1. From the WordPress dashboard, create a New Post.<\/p>\n<p>2. In the right side menu, you should see a column called \u201cPost Attributes\u201d, with the header \u201cTemplate\u201d beneath it.<\/p>\n<p>3. Click on the <em>Template <\/em>dropdown menu to see the assorted templates available. Your new template will be listed there as you named it, so go ahead and select it!<\/p>\n<figure id=\"attachment_209515\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-209515 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/new-template-type-in-dropdown-menu.png\" alt=\"New Template type in dropdown menu of Post Editor\" width=\"600\" height=\"395\" \/><figcaption class=\"wp-caption-text\">Create your post and save it, or simply save and preview to get a look at it.<\/figcaption><\/figure>\n<figure id=\"attachment_213530\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-213530\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/new-template-post-preview.png\" alt=\"new template post preview\" width=\"600\" height=\"452\" \/><figcaption class=\"wp-caption-text\">Preview of a New Post made with my custom template.<\/figcaption><\/figure>\n<p>There\u2019s my \u201ctest\u201d message. It\u2019s not very pretty, but that\u2019s easily fixed by formatting, such as adding padding, changing font type, style, color, etc. The important thing is, it definitely did what we wanted!<\/p>\n<p>Now, let\u2019s try the plugin method.<\/p>\n<h2><a id=\"use-plugin\" target=\"_blank\"><\/a>Create a Custom Post Template with a Plugin<\/h2>\n<p>If you don\u2019t want to touch any code, you can opt to go the plugin route. In this example, we\u2019re going to use the Custom Layouts plugin.<\/p>\n<p>Head to the WP plugin repository to get the <a href=\"https:\/\/wordpress.org\/plugins\/custom-layouts\/ost-template\/\" target=\"_blank\">Custom Layouts<\/a> plugin.<\/p>\n<figure id=\"attachment_209516\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209516\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/plugin-custom-layouts.png\" alt=\"Custom Layouts plugin\" width=\"600\" height=\"200\" \/><figcaption class=\"wp-caption-text\">Custom Layouts plugin.<\/figcaption><\/figure>\n<p>2. After installing and activating the plugin, you\u2019ll see its menu in the dashboard.\u00a0Click on Templates, then the <strong>Add New Template<\/strong> button.<\/p>\n<figure id=\"attachment_209517\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209517\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/plugin-custom-layouts-add-template.png\" alt=\"Custom Layouts plugin, add a template\" width=\"600\" height=\"256\" \/><figcaption class=\"wp-caption-text\">Custom Layouts plugin, add a template.<\/figcaption><\/figure>\n<p>3. This will open the Template editing mode, which works with Gutenberg blocks via the left side of the screen.<\/p>\n<p>You can work from the Template or Element tabs, accessible on the right side of the screen. Make sure to name your template, and save it when complete.<\/p>\n<figure id=\"attachment_209518\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209518\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/plugin-custom-layouts-template-creation.png\" alt=\"Custom Layouts plugin, Template editing mode.\" width=\"600\" height=\"409\" \/><figcaption class=\"wp-caption-text\">Custom Layouts plugin, Template editing mode.<\/figcaption><\/figure>\n<p>4. You can save this as a template for any future posts, or use the shortcode (furthest right side panel in editing mode) to display a single instance of the template.<\/p>\n<p>If you prefer, you can work from the Layouts menu, which allows for easy setup of grid type posts. Everything you do here can also be saved as a template for future use, or by using shortcode to display the layout.<\/p>\n<figure id=\"attachment_209519\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209519\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/plugin-custom-layouts-layout-creation.png\" alt=\"Custom Layouts plugin, Layout editing mode.\" width=\"600\" height=\"527\" \/><figcaption class=\"wp-caption-text\">Custom Layouts plugin, Layout editing mode.<\/figcaption><\/figure>\n<p>5. You can View, Edit, or Delete Templates or Layouts at any time from the dashboard plugin submenus.<\/p>\n<figure id=\"attachment_209520\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-209520\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/11\/plugin-custom-layouts-template-view-edit-trash.png\" alt=\"Custom Layouts plugin, saved templates list.\" width=\"600\" height=\"386\" \/><figcaption class=\"wp-caption-text\">Custom Layouts plugin, saved templates list.<\/figcaption><\/figure>\n<h2><a id=\"summary\" target=\"_blank\"><\/a>Post-it Notes<\/h2>\n<p>There you have it&#8230; two relatively quick and easy ways to give individual posts a unique style.<\/p>\n<p>For those who particularly enjoy DIY, check out this in-depth article on the blog, <a href=\"https:\/\/wpmudev.com\/blog\/easy-guide-to-displaying-custom-post-types-in-your-wordpress-theme\/\" target=\"_blank\">Creating Custom Content in WordPress: Custom Post Types<\/a>.<\/p>\n<p><em>Editor\u2019s Note: This post has been updated for accuracy and relevancy.<br \/>\n<\/em><em>[Originally Published: November 2011 \/ Revised: April 2022]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Give individual posts their own style. You&#8217;re only limited by your imagination.<\/p>\n","protected":false},"author":84404,"featured_media":208425,"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":[4],"tags":[4993],"tutorials_categories":[],"class_list":["post-62811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-templates"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/62811","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\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=62811"}],"version-history":[{"count":10,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/62811\/revisions"}],"predecessor-version":[{"id":209108,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/62811\/revisions\/209108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/208425"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=62811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=62811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=62811"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=62811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}