Advertisements

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

How to add related posts to GeneratePress

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.

Lists in WP Show Posts for the related articles

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.

Settings in WP Show Posts for the related articles

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.

Advanced options in WP Show Posts for the related articles

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.

The number of columns for the related articles in WP Show 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.

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

Leave a comment

Advertisements