Display Related Posts on Single Blog Post

The Astra theme allows you to display related posts directly from within the theme customizer. This allows you to enhance the user experience on your single blog posts effortlessly.

This feature simplifies the process of guiding your website visitors to additional relevant content, thereby increasing engagement.

Below in this document, we’ll outline how you can customize this built-in option to display related posts on your single blog posts effectively.

What Are Related Posts?

Related posts are displayed at the bottom of a single post. These posts are picked from related categories or tags of the current post. So when users complete reading the current post, they find more related content that can engage them for a longer time. This way, users get to read more content related to their topic of interest, and it brings more page views for your website.

For example, Let’s say you have posts named A, B, C, D in the category Fashion. So on the post A, the rest of the posts from the same category i.e B, C, D will be displayed as related posts at the bottom. Once the user completes reading post A, he/she can choose from other posts and continue reading.

Let’s see how you can add related posts using Astra –

Add Related Posts With Astra

Astra makes it easy to display related posts on all single posts. The option is available right inside the customizer, so you don’t need to use any extra plugin. Astra gives you total control to display and customize related posts.

Here are the steps to enable related posts on single posts –

Before we begin, make sure you have the Astra theme updated to version 3.4 and above.

Step 1 – From the WordPress dashboard, go to Appearance > Customize.

Step 2 – In the Customizer, visit Post Types > Single Post.

Step 3 – Here you will find the option for ‘Related Posts’. Turn it on. It will display more controls when you click the arrow next to it.

Title – This option allows you to highlight your related post section with an engaging title. You can rename the default “Related Posts” title to anything you need. Also, you can manage the related posts section title alignment.

Total Number of Related Posts – Here, you can decide how many posts from the related category or tag you wish to display. For example, if you have 20 posts under the category Fashion, decide how many posts from this category should be displayed as related posts.

Grid Column Layout – Related posts will be displayed in a grid structure, i.e., a row-column structure. First, you can set the number of columns you wish to display. Then, based on the total number of posts you display with the above option and column number, rows will be added automatically. For example, if you display 8 posts with 3 columns, you will see posts displayed in 3 rows. Related posts column grid is also responsive – you can set a different number of columns for each of the devices by clicking on the responsive icon.

Posts Query – Here, you can set a source to fetch related posts from. You can choose Categories or Tags. Posts will be fetched randomly from chosen source and will be displayed as related posts. You can manage to display posts in a particular order.

Post Structure – Here you can manage to display the featured image, title, and post meta. Just click on the eye symbol to enable or disable the particular section of the post. You can even manage the sequence of metadata with simple drag-and-drop.

Step 4 – Once you decide on a structure you wish to display related posts with, you can set the color and typography of your choice. Click on the Design tab at the top, and you will observe dedicated options for related posts.

Here you can set –

• Section Title
• Section Background
• Content Colors
• Section Title Font
• Post Title Font
• Meta Font

Note: After Astra v4.6.0, the free version now supports the customization of author avatar pictures, offering new options such as enabling avatars and changing the avatar size for the author profile picture. Learn more about the customizations available after Astra v.4.6.0 here.

You will find this option after enabling Related Posts under Single Post. Under related posts, navigate to Meta > Author and enable the Author Avatar toggle button.

We hope this document has been helpful. Please feel free to leave a comment below if you have any queries.