Give Individual Posts a Unique Style with WordPress Custom Post Templates

Give Individual Posts a Unique Style with WordPress Custom Post Templates

With the introduction of format types in WordPress, the ability to post “Link” posts or “Gallery” posts , etc. became something you could do out of the box.

But if you’ve ever wanted to give different posts a style of your own, there are a couple ways to accomplish this—with a bit of custom coding, or by using a plugin.

We’ll look at both in this post.

Continue reading, or use the links below to jump to any section:

First up, let’s…

Create A Custom Post Template With Code

1. It’s 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.

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 The HUB. Alternately, you could use a plugin (we recommend Snapshot Pro).

Backup files in the Hub
Push-of-a-button backups via WMUDEV’s The Hub Interface.

2. Access your WordPress site files, either on your own server, or through your host access point.

The Hub, view-edit files
Accessing WP site files through WPMUDEV’s Hub is a swift, streamlined experience.

3. Navigate to: Files > wp-content > themes > twentytwenty (or whatever theme you’ll be using)… and locate the single.php or singular.php file.

4. Make a copy of this file, then rename it. I’m going to call mine: jbtest.php.

Duplicate & rename a php file in WP
Creating and editing a php file in WordPress.

5. Now we need to move this file into the templates subfolder (under twentytwenty).

You’ll note that the files already populated here are preceded by “template–”, so we’ll rename the file again to match that convention, making mine: template-jbtest.php.

Creating and editing a php file in WordPress.
This is how the folder and files look at this point.

Now that the file is named appropriately and in the correct folder, we need to edit the contents so it’s coded as a template.

6.  Go into editing mode (right-click the file, and choose Edit text), and at the very top of the code, add the following:

<?php
/*
* Template Name: JBTest
* Template Post Type: post, page
*/
?>

Pasting the template code into the PHP file.

Where the code reads “Template Name Posts: JBTest”, use whatever name you like (in place of JBTest).

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.)

7. Change the rest of the file in whatever way you like, to make it your own. Make sure to click “Save & Close” after completing the edit.

Insert test text php file
I added some random “testing” text further below, as a visual validation that the code worked.

Create a New Post Using a Template

Let’s create a new post, so we can test out the template we just made.

1. From the WordPress dashboard, create a New Post.

WPMU DEV AccountPRO

Our best pro WP tools in one bundle

Try free for 7 days
30-day money-back

2. In the right side menu, you should see a column called “Post Attributes”, with the header “Template” beneath it.

3. Click on the Template 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!

New Template type in dropdown menu of Post Editor
Create your post and save it, or simply save and preview to get a look at it.
new template post preview
Preview of a New Post made with my custom template.

There’s my “test” message. It’s not very pretty, but that’s easily fixed by formatting, such as adding padding, changing font type, style, color, etc. The important thing is, it definitely did what we wanted!

Now, let’s try the plugin method.

Create a Custom Post Template with a Plugin

If you don’t want to touch any code, you can opt to go the plugin route. In this example, we’re going to use the Custom Layouts plugin.

Head to the WP plugin repository to get the Custom Layouts plugin.

Custom Layouts plugin
Custom Layouts plugin.

2. After installing and activating the plugin, you’ll see its menu in the dashboard. Click on Templates, then the Add New Template button.

Custom Layouts plugin, add a template
Custom Layouts plugin, add a template.

3. This will open the Template editing mode, which works with Gutenberg blocks via the left side of the screen.

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.

Custom Layouts plugin, Template editing mode.
Custom Layouts plugin, Template editing mode.

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.

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.

Custom Layouts plugin, Layout editing mode.
Custom Layouts plugin, Layout editing mode.

5. You can View, Edit, or Delete Templates or Layouts at any time from the dashboard plugin submenus.

Custom Layouts plugin, saved templates list.
Custom Layouts plugin, saved templates list.

Post-it Notes

There you have it… two relatively quick and easy ways to give individual posts a unique style.

For those who particularly enjoy DIY, check out this in-depth article on the blog, Creating Custom Content in WordPress: Custom Post Types.

Editor’s Note: This post has been updated for accuracy and relevancy.
[Originally Published: November 2011 / Revised: April 2022]

Tags: