This guide will walk you through creating a custom template for single posts using the Site Builder module in Astra Pro.
The Site Builder module of Astra Pro enables you to design custom layouts for headers, footers, 404 pages, and more. Additionally, it allows you to insert any layout or code using hooks.
To learn more about the Site Builder module, check out this documentation.
How to Create Custom Template for Single Posts
Let’s walk through the steps to create custom templates for single posts and achieve the layout you want. We’ll guide you step by step so it’s easy to follow.
By the end of this guide, you’ll also find some example templates that you can create using the Site Builder.
Let’s get started!
1. First, activate the Site Builder module of Astra Pro. This will require installing the Astra Pro Addon plugin. If you have not already installed it, please check this installation guide.
2. Next, click on Site Builder settings and select Single Post option to create a layout:
3. Once you click on create layout, you will see the default WordPress editor where you can create your layout. Site Builder layout works with your page builder. So, if you use Elementor or Beaver Builder instead of the default Block Editor, you can use that to create the single post template.
4. Here, you can start adding the blocks to your single template. The block editor comes with the required basic dynamic blocks that can be used for the template building.
Some blocks that you will need are:
- Title
- Featured image
- Author name
- Date (Published or modified)
- Post Content
- Comments
The above blocks are required for any basic single post template design. Using the block editor, you can add the above blocks for the content insertion in the single posts.
Note: If you’re using any other page builder, I recommend checking if the page builder has the dynamic blocks in the free version. Some plugins such as Elementor require Elementor Pro for such blocks/widgets.
Enable Single Post Templates Using the Display Conditions
5. Once you have created the design for your single post, now the time is to use the template for the single posts. For this, we need to apply the display conditions to ensure the layout is applied for the single posts.
For this, click on the Astra icon on the right top corner and it will display the required display conditions.
Note: Using the display conditions, you can use this template on all posts, pages, specific post or posts from specific categories.
You can use the Site Builder templates to create multiple templates for multiple post types or categories. The display conditions will ensure the template is used on the posts.
6. After applying the display conditions, click on publish to save the template layout.
7. Now, you can create your posts normally and after publishing, it will use the post template created using the Site Builder. There is no requirement to select any template in the post once the Site Builder display conditions are set.
Enhance Single Post Template with Spectra Dynamic Content
You can use Spectra blocks and Spectra Dynamic Content extension to enhance your single post template and create beautiful advanced templates.
For example, you can use the Spectra Header blocks with Dynamic Content to add post title, excerpt or other content.
Learn more about using the Spectra Pro Dynamic Content here: Spectra Pro Dynamic Content Extension – Spectra
Similarly, you can display the Featured Image using the Dynamic Content for the Container background. This may be helpful for a design with Post Title displaying over the Featured Image.
Single Post Template Example
Below you can see the outcome of a single post being displayed with or without the single post template from Site Builder.
Without Site Builder, using the default layout:
With Site Builder Single Post Template:
Another example with sticky side panel showing Author information and table of content:
You can further enhance it according to your requirements and use the blocks and layout as needed.
We hope this article has been helpful. Please feel free to leave a comment if you have any questions.
