How to Show Related Posts in GeneratePress Theme? [2024]

In this guide, we will show you the steps to display related posts in the GeneratePress theme using the WP Show Posts plugin, and Elements Module. You may already know that GP is a popular WordPress theme that focuses on speed, stability, and accessibility. And even though WordPress themes come dime a dozen these days GeneratePress rules the roost.

Moreover, GenratePress beholds a slew of impressive feature sets that set this theme apart from the other thousand options. For example, its lightweight size of less than 30 kb, free & open source code, and fast loading speed with optimal performance for your visitors and search engines make this theme one of the favorites among bloggers, freelancers, or agencies.

However, despite all the goodies attached, there is one option missing in the GeneratePress theme ─ Related posts. By default, GeneratePress doesn’t offer any option to display related posts on blog posts. Still, that doesn’t mean you can’t add related posts at all. Thankfully, there are quite a few ways we can display related posts under single blog posts.

Add Related Posts with GeneratePress 

There are a couple of ways you can show related posts in your GeneratePress theme. The first one is installing a related posts plugin like Yet Another Related Posts Plugin (YARPP) or Contextual Related Posts from the WordPress plugin repository that can automate the whole process for you. 

However, in return, these plugins may slow down your site speed which is a deal breaker because your site speed not only improves user experience, it is a confirmed ranking factor for Google’s search results. The second way is to add custom .php code to your theme function.php file and then style the related post section with some additional CSS. 

The latter, in turn, will not slow down your site compared to the plugins, this method is not beginner-friendly as you have to edit your theme function file which could be daunting for most non-coders. This is why we’ve come up with a method that maintains the equilibrium between personalization, simplicity, and speed. 

As in this guide, we’re going to use the WP Show Posts plugin with the GP Elements module. For the unaware, WP Show Posts is a lightweight plugin developed by the same developer of Generatepress. It allows you to add posts in any section of your theme using Shortcode or PHP, and with this method, you won’t notice any speed decrease in your site. 

Therefore, to show related posts in the GeneratePress Theme, we’ll use the WP Show Posts Plugin, Elements Modules from the theme, and lastly, style it with some custom CSS. Following are the steps we’ll have to follow to achieve that.

1. Install and setup the WP Show Posts Plugin
2. Activate the Elements Module and add the WP Show Posts shortcode.
3. Style Related Posts with CSS.

Step 1: Install and setup the WP Show Posts Plugin

First of all, install the free WP Show Posts Plugin from the WordPress plugin repository, and make some necessary changes there. To do so, follow the steps below.

1. Search and install the WP Show Posts plugin.
   
2. Once that’s installed and activated, create a new WPSP list by clicking WP Show Posts > Add New from the sidebar. Now you can set the number of posts you want to be displayed, columns, etc.
   
3. Give the list a title. Select the Taxonomy as Catagory and Posts per page as 3. It will provide a shortcode that looks like this: [wp_show_posts id=”123″] Take note of the id (as you can see from the below screenshot my wp_show_post id is 77 and for you, it’ll be different).
   
4. From Columns section > Columns as 3. Leave Columns gutter as 2em.
   
5. From the Images section > Check the Images (it’ll show related posts with thumbnails). Leave Image width (px) and Image height (px) as empty. Image alignment as Center and Image Location as Above title.
   
6. From the Content section > Content type as None. Check Include title. Set Title Elements as p and leave other options blank.
7. Go to the Meta section > Uncheck all settings.
8. Lastly, from the More settings> Check Exclude current and Ignore sticky posts. Leave all other settings as it is.

Finally, click on the Publish button to publish the WPSP list. And with that, we’ve completed our first step. Now in the second step, we’ll have to add a shortcode with our unique Show Post ID as a Hook in GP Element.

Step 2: Activate Elements Module and add WP Show Posts shortcode

After creating a new WPSP list, it’s time to add a shortcode as a Hook in the GP Elements Module. Do note that Elements is a premium GeneretePress module. Therefore, you’ll have to have the GP Premium to access that. With that said, the following are the steps to add the code in GP.

1. Activate the Elements Module. To do so, go to Appearance > GeneratePress > Elements > Activate
2. Now, go to Appearance > Elements > Add New
3. Choose Element Type as Hook and give it a title.
4. Now create a new Hook Element, and in that hook text area copy and paste the following code with your correct ID: <div class=”RelatedPosts”> You Might Also Like: </div> [wp_show_posts id=”123″ settings=”taxonomy=category&tax_term=current”] (Note: Don’t forget to replace 123 with your wp show posts ID)
5. After pasting the code, go to the Hook Settings set the Hook to generate_after_content, and check the Execute Shortcodes option.
6. Set the Display Rules Location to Posts > All posts and leave other settings as it is.
7. Finally, hit the Publish button.

Final Step: Styling Related Posts

Finally, we’ll add some additional CSS to change the look and feel of the related posts section. We’ll change the heading font size, margin, etc. If you’re comfortable, you can tweak the CSS to your liking. To add the CSS, go to Appearance > Customize > Additional CSS and paste the following code in the Additional CSS section.

/* GP Related Posts by Gizmoradar  */ 
.RelatedPosts {
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0px;
}
.wp-show-posts-image img{
	border-radius: 5px;
	box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%), 0 0 6px 0 rgb(0 0 0 / 10%), 0 2px 2px -2px rgb(0 0 0 / 15%);
}

Conclusion

That’s all you need to know about how to display related posts by category in the GeneratePress theme. And on that note, we round off this guide. If you have any queries concerning the aforementioned steps, do let us know in the comments. We will get back to you with a solution as soon as possible.