Every WordPress theme displays the blog posts on your site in a different style. The elements displayed on the blog posts are also different, depending on the theme you use. But in general, the following elements are displayed on the blog posts:
- Post title
- Post meta
- Post content
- Featured image
Popular themes like Divi and Jupiter offers several single post styles you can choose from. Divi even allows you to create your own single post template, allowing you to add any element to your liking. If you don’t use Divi or a theme that offers a feature to customize the single post layout, you can use Brizy to create a custom single post template on your WordPress site.
In case you haven’t heard about Brizy. It’s a page builder plugin just like Elementor and Divi Builder which allows you to create beautiful pages on your WordPress site without dealing with CSS or HTML. One of the features offered by Brizy is Theme Builder. You can use this feature to create custom templates to replace the default templates of your theme parts, including the single post layout. In this post, we will show you how to create a custom single post template in WordPress using Brizy.
How to create a custom single post template in WordPress using Brizy
Brizy is a freemium plugin. The feature to create a custom single post template is actually available on both the free version and the pro version. However, since the required elements like post title, post content, featured image, and post meta are only available on the pro version, you need to use the pro version to use the feature.
In this example, we will create a simple custom single post template that consists of the following elements:
- Post title
- Featured image
- Post meta
- Post content
- Comment box
If you are new to Brizy, you can read this article to learn how to use Brizy. Before getting started, make sure you have upgraded your Brizy to the pro version in case you haven’t done so.
First off, go to Brizy -> Templates on your WordPress dashboard. Click the Add New button to create a new template.
Give your template a name and set the display condition on the Display Conditions section. You can assign the template to all posts on your site, specific posts, posts under certain categories, and posts from certain authors. Click the Add button to set a display condition and click the Publish button to publish the template. Once published, you can click the Edit with Brizy button to edit the template using the Brizy editor.
Note: Make sure to create the template from the same route as we showed above (add template name -> set display condition -> click the Publish button -> click the Edit with Brizy button). Otherwise, you might experience issues with the Post Title and Post Content elements.
You will be taken to the Brizy editor after clicking the Edit with Brizy button above. Start by adding a new block by clicking the plus icon on the canvas area. Brizy actually offers tons of premade block templates and page layouts. Unfortunately, there are no premade templates designed for custom single post templates yet so you need to create the template from scratch. Click Create your own to create the template from scratch.
Before adding any element to the block, you can customize the block first. To do so, you can hover your mouse over the block and click the mixer icon to open the settings bar. You can set things like background color, and block layout (boxed or full-width) on the settings bar.
In Brizy, column is not a required element like in Elementor and Divi Builder, but a column helps a lot in making your design way more organized. You can also use a column to add a sidebar to the custom single post template you are creating. To add a column, simply drag the Column element from the left panel to the canvas area. To set the column width, click and hold the column handle and the drag rightward to leftward.
Adding the post title element
As we mentioned, we will create a simple custom single post template that consists of the post title, featured image, post meta (post info), post content, and the comments box.
To add a post title element to the custom single post template you are creating, simply drag the Post Title element from the left panel and drop it to the canvas area.
To customize it, you can click the Post Title element to open the settings bar. You can click the Typography tab to set the typography (font family, font size, and so on). To set the text color, you can click the Colors tab. To set the alignment, you can click the Align tab.
To add the featured image element, you can drag the Image element from the left panel and drop it to the canvas area. You can place it whether above the title or beneath the title according to your design concept. Once the Image element is added, click it to open the settings bar. Click the Image tab on the appearing settings bar. Click the database icon next to the image selector under the Image tab and select Featured Image.
To set the size of the featured image, you can click the gear icon on the settings bar (you can also drag the image handle). To set the alignment, you can simply click the align icon.
If you want to set the border color — as well as the size –, you can click the Colors tab on the settings panel.
To add post meta to the custom single post template, you can drag the Post Info element to the canvas area. There are 4 pieces of information that are displayed by default: author, date, time, and comments count. To disable one, you can click the element. On the appearing settings bar, click the WordPress icon. Click the trash icon on the information you want to disable.
To set the typography of the post meta, you can click the Typography tab on the settings bar. To set the text color, you can click the Colors tab. To set the alignment, you can click the align icon.
Post content is the main element of the single post template. To add one, you can simply drag the Post Content element from the left panel and drop it to the canvas area. Click the element once added to open the settings bar. Again, to set the typography, you can simply click the Typography tab. To set the text color, you can click the Colors tab. And to set the alignment, you can click the align icon (tab).
To add the comment box, you can drag the Comments element to canvas area. You can select one out of three commenting platforms: Facebook, Disqus, and WordPress default commenting. Click the element and click the bubble icon to select a commenting platform.
You can customize the typography only if you use WordPress default commenting (you can click the element to display the settings bar to set the typography and text color). But, you can set the background color, alignment, and width regardless of the commenting platform you selected. To do so, hover your mouse over the element and click the grey arrow icon on the top-right corner to open the settings bar.
That’s it. You can play around with the Brizy editor to style up every element. Once done, you can click the tiny arrow icon on the bottom-right corner select Publish Page to apply the template according to the display condition you have set beforehand. You can also add other elements such as post navigation and breadcrumbs if you want it.
Note: If you want to add elements like post tags, post categories, or custom fields you created with Advanced Custom Fields or Pods, you can press the hash key (#) on the keyboard to show the full list of the dynamic content types you can add. Read here to learn more.