If you browse any of my websites, all of which run the theme GeneratePress, you will notice that I have related posts under just about every article. In fact, you will see them if you scroll all the way down on the article you are reading right now. The same goes for my food blog (see this recipe for delicious ciabatta as an example), where I use a slightly different design.
Related posts are ideal for reducing your bounce rate and keeping visitors on your website. Relevant related posts will make those interested in your content browse further, telling Google that your website might be relevant to the topic you’re writing about.
Unfortunately, this isn’t something GeneratePress supports out of the box. It is your responsibility to implement related posts in one way or another. This guide will show you how to exactly that using just the plugin WP Show Posts, which incidentally was developed by the same person who gave us GeneratePress, and the GeneratePress Elements, which are part of the theme’s paid version.
Setting up WP Show Posts
To get started we’re going to set up lists in WP Shop Posts for every category.
In the list settings make sure you select the correct category and set the Posts per page value. I recommend you go no higher than three posts.
In the settings make sure you enable the option exclude current. This will make sure that the article which is currently being read won’t show up in the related posts.
Inside the columns settings make sure the number of columns is equal to the number of posts from the previous step.
The rest of the settings are up to you. You could use one of the cards presets or do it your own way. I am using Overlay – Style 1 for my related posts.
Configuring the GeneratePress Element for related posts
To display the WP Show Posts list we’ve just created we are going to create a new Hook Element.
Simply paste the shortcode of the appropriate list and make sure to enable the option Execute Shortcodes.
I want to place my related posts above the comments’ container, so I went with the hook generate_before_comments_container.
This visual guide will tell you where the hooks are located.
Move over to the Display Rules tab. Here you can select, where the list will be displayed (and where not).
Select the appropriate category and save your Element. In my case, the related GeneratePress guides posts will be displayed on all articles with the category GeneratePress.
Related posts in a box
If you want your related posts to be displayed in a box, you need to adjust your GeneratePress Element ever so slightly.
In this example I’m also giving each box a title. To achieve this simply use the following code:
<div class="inside-article">
<h3>TITLE GOES HERE</h3>
[wp_show_posts id="7697"]
</div>
Wrapping up
And that’s how you create related posts in GeneratePress using Elements and WP Show Posts. If you do have any questions please leave me a comment or use the contact form.
