Add Random Related Posts from Category in GeneratePress Theme

GeneratePress is a lightweight theme that helps to build fast loading websites. However, the problem comes when you want to add additional functionalities like showing related posts below the post content. Earlier you could use WP Posts or any other related posts plugins available in free plugin repository. Though these plugins work smoothly, they have limited customizations and impact the page loading speed. Good part is that now you can add customized related posts section in GeneratePress theme using GenerateBlocks plugin without affecting page speed.

What You Need?

You need the followings to add custom related posts section that shows posts from the same category of current article:

• Free GeneratePress theme
• GP Premium add-on plugin
• Free GenerateBlocks plugin
• GenerateBlocks Pro plugin

Since the plugin and theme are from the same developer, it works seamlessly. You need the GP Premium add-on for creating Elements and GenerateBlocks Pro plugin for using custom parameters like showing posts from current category. So, make sure to install and activate the plugins before following the steps in this tutorial.

Related Posts Example for GeneratePress Theme

In this example, let me show 4 posts in a single row with each post having the featured image and post title. The posts will be from the same category of the article viewed and load in a random order. You can customize the parameters as per you need like showing posts from same tag instead of category or load the latest modified posts instead of random order.

I will insert the related posts section just above the comments container as shown below.

1. Activate Elements in GP Premium

After installing and activating GP Premium plugin, go to “Appearance > GeneratePress” section. First, make sure to enter the license key and activate your purchase. After that scroll down in “Modules” section and click “Activate” button against “Elements” module.

2. Create Related Posts Element

Go to “Appearance > Elements” section and click on “New Element” button. If you are not seeing “Elements” menu, reload the page so that it will appear.

Click the “Choose Element Type” dropdown and select “Block” option from the list. After that. Click on “Create” button.

3. Adding Blocks to Related Posts Element

First, name your element as “Related Posts” and then click “Document Overview” icon showing on the top toolbar. Go to “List View” section so that you can easily view the blocks used in the elements.

• First, add a Container block.
• Inside the container, add a heading and name it as “Related Articles:” or anything that you want to use. Change the heading to use H3 or H4 as per your need.
• Below the heading, add a “Query Loop” block and select “Two columns & featured image” option.

4. Customizing Related Posts Section

• This will instantly show list of posts preview and select “Post Template” block from the “List View” section. As we want to show 4 posts in a single row, select the “Grid Item Width” as 25% under “Block” section in right sidebar.

• Click the three vertical dots (options for that block) showing against “Post date” block in list view and select “Delete” option. similarly, delete “Post excerpt” block also from the list.

• Select “Post title” block and choose H4 as your heading level. You can choose any other level as per you need. If you want to change the font size, go to “Block > Typography” section from right sidebar and change it in “Font Size” box.

• If you want to show the related posts as a separate container, make sure to set the padding/margin and background color under “Block” section.

4. Adjusting Number of Posts and Category

Now that your related posts element is ready and you can customize other parameters.

• Select “Query Loop” block from list view and change the “Posts Per Page” to 4 from right sidebar.

• Click “Add Parameter” button, click the “Select Query Parameter” dropdown and select “Taxonomies” option.

• Choose “Categories” as your taxonomy (you can also choose “Tags” if you want).

• Select “Current post terms” option for “Select Terms” dropdown. If you have child categories and want to show posts from them in the related posts, then turn on “Include child terms” button.

5. Excluding Current Post

At this point of time, your related posts will include the current post that you are viewing and you should exclude it from the list.

• Click “Add Parameter” button and select “Exclude Posts” option from the list.
• Now, click tat dropdown and select “Exclude current post” option.

6. Showing Posts in Random Order

The above related posts element will show 4 latest posts from the same category. You can show the order in random to mix up your old posts in the list.

• Click “Add Parameter” button and select “Order By” option.
• Click that dropdown and select “Random” option from the list.

You can also order the posts based on last modified date, author, ID, title, etc.

7. Setting Related Posts Element Position

As mentioned, I want to show the related posts just above the comments container.

• Go to “Elements” tab in right sidebar.
• Make sure the “Element Type” is selected as “Hook”.
• Select the hook name as “before_comments_container” from the list.
• If you have multiple hooks using the same “Hook Name”, type the priority to change the order of your related posts section (you should also set priority for other elements accordingly).

8. Setting Display Rules

The final step before publishing your related posts element is to set the location for the element.

• Go to “Display Rules” tab showing below the preview of related posts.
• Click the “Location” dropdown and select “Posts” from the list. This will automatically select “All Posts” in the second the dropdown indicating the related posts will be shown in all blog posts.

You can use “Exclude” and “Users” options to hide the related posts on any particular section, post or for a user role.

9. Test Related Posts Element

Click on the “Publish” button and open any post in your site. You should see 4 related posts showing in a single row as shown below.

You can customize text size, color, padding, margin and include excerpt/date in the display.

Note for Caching: Since the related posts section is created with CSS, it may have problem with page level caching plugins like WP Rocket when using “Random” order. Caching plugin will load the content as shown in the first page load and may not change the order afterwards as static content will be loaded from cache. This may not be the problem with other way of ordering as cache purging will periodically delete and update the latest content.

Final Words

Though the process looks lengthy, it is simple and one-time. Moreover, it gives you complete flexibility of choosing location, number of posts, show posts from category or tag, exclude current post and change the order. If you are missing current term and random parameters, make sure to install/activate GenerateBlocks Pro plugin.