How To Display GeneratePress Related Posts [Step-by-Step]?

If you are looking to display related posts in the GeneratePress theme, then you are at the right place. In this article, we will see how to display related posts in GeneratePress with and without plugins. If you still doubt about using premium generatepress theme then please read this generatepress review that will help to make a decision.

On BloggingIdol, we are using GeneratePress WordPress premium version and are highly satisfied with the theme. If you are using the GeneratePress free theme, you will manually need to add Related Posts code into the WordPress single.php file.

Having said that, I understand not everyone is code savvy, and beginners might not even know how to get around the WordPress PHP files.

Therefore, it is best advised to get GeneratePress premium plugin. Moreover, you will be amazed looking at all the possibilities you can achieve using the GENERATEPRESS ELEMENTS module, in GeneratePress theme.

Note: GeneratePress Premium is also called as GP Premium.

To make sure you get to know all the differences between both the versions of GeneratePress, I have created GeneratePress free vs premium article.

Related Posts are a great way to keep your visitors engaged, get more attention from them, and promote fresh content. Having related posts in WordPress website gives a boost to your ad earnings as well.

bluehost hosting banner

related post increase ad income
Related Posts can increase your Ad Income

They help in decreasing your website’s bounce rate and also increase your pageviews or income from ads.

3 Ways To Display GeneratePress Related Posts

  1. Directly use Plugins from WordPress Repository
  2. Manually add Related Posts Code into WordPress PHP files [Can be used on GeneratePress Free version]
  3. Use Plugin and Code for best results

On BloggingIdol, I have used the 3rd method to display related posts, right after the main content, on every single blog posts.

Method number 3 is a STEP-BY-STEP demonstration to display GeneratePress related posts using WP Show Post Plugin, PHP Code for creating a Hook and CSS Code for Styling Related Posts.

How To Display GeneratePress Related Posts?

To perform this activity you will first need to install and activate WP Show Posts plugin.

Later, some initial setup has to be done in order to get things up and running.

Install, Activate & Basic Setup of WP Show Posts Plugin

WP Show Posts plugin is a free plugin available in the WordPress repository. It is created by the same developer who has created the GeneratePress theme, Tom Usborne.

  • Go to your WordPress Dashboard, look for Plugins, and select Add New.
  • Type WP Show Posts in the Search Bar
  • Install and Activate it
WP Show Posts plugin - related posts generatepress
WP Show Posts Plugin – Related Posts GeneratePress

Once activated, on your WordPress Dashboard, look for WP Show Posts and select Add New List.

Give your list a name, I have given WPrelated (this is case sensitive, and will be used in the hook).

Under the Post tab, select Post type as Post and Taxonomy as Category. In other words, this is a technique to display posts by category in WordPress.

related posts in generatepress - post settings
Related Posts In GeneratePress – Post Settings

You do not need to check mark your categories. I have used 3 Posts per Page. The choice of number of posts per page is completely up to you. Currently with this setting, it will show related posts in same category.

related posts plugin
WP Show Posts – Related Posts Plugin Columns Setting

Then click on the columns tab, select 3 Columns and apply Column Gutter of 2em.

On the Images Tab, check mark Images and set the width and height.

style related posts images
Style Related Posts Images

You can perform center alignment on the image, as well as adjust the image’s location with respect to title.

related post generatepress - related post section

Under the Content tab, select None for Content Type and check mark Include Title. Leave the rest as it is.

wp show posts plugin - related post generatepress
WP Show Posts Plugin – Related Post GeneratePress

Including anything under the Meta tab is totally up to you. In my case, I have left them all unchecked.

Finally, in More Settings you can add an Author’s ID, Post IDs, etc.

Always keep in mind to exclude current posts from lining up under the Related Post section. For that, check mark Exclude Current.

Related Posts GeneratePress Theme
Related Post In GeneratePress Theme

Also make sure to check mark Ignore Sticky Posts. These are the ones which are already shown in your sticky sidebars. So, this will save you from duplicate content issues.

Related Post GeneratePress Hook

You will need you to create GeneratePress Hook Elements.

After completing the basic setup of WP Show Posts plugin, you will need to create a Hook that applies the appropriate function for loading the Related Post section under every single blog article of your website.

For creating a hook you will need to have the GeneratePress Premium version

Let’s start by creating a GeneratePress elements hook.

Go to your WordPress dashboard, in the Appearance section, click on Elements.

display related posts - generatepress elements

When the Elements Module page opens up, click on Add New Element. From the drop down menu, select Hook.

generatepress hook elements
GeneratePress Hook Elements

Give it a name and add the code just like the image below.

related post generatepress - php code
Related Post GeneratePress – PHP Code

Use the following code to apply same GeneratePress post grid on your website.

<div class="wp-related-posts  grid-container">
	<h2>Related Posts</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'WPrelated', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

After adding the code, you will also need to apply location and rules to your GeneratePress custom hook.

show related posts in generatepress theme

The best location for this hook to appear, is exactly after content.

Display rules - show related posts in generatepress theme

Make sure to apply display rules with All Singular location and exclude Pages.

Check Mark Execute PHP and hit the Publish button.

GeneratePress Custom CSS To Style Related Posts

This brings us to the last part of this demonstration. By now you have made related post by category to appear on all single article blog posts.

This part is for styling purposes only.

For doing so, go to your WordPress dashboard, locate Appearance, and click on Customize.

related posts section - custom code

It will open the GeneratePress theme customizer. From there, go down and click on Additional CSS.

related posts in generatepress theme - additional css
Related Posts In Generatepress Theme – Additional CSS


.wp-related-posts {
    background-color: #fff;
	  border-radius: 5px;
    padding: 30px 18px 12px 30px;
    margin-top: 45px;
text-align: center;
	
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .4) 0 7px 28px!important;
	
}

After completing all the steps and the procedures, it is now time to go to one of your single blog posts and look below your content, in my case it is below the Author Box in Generatepress.


Show Related Posts In WordPress Single.PHP File (Without Plugin)

If you wanted to manually code for including related posts in each of your blog posts, you’d have to do it under your WordPress single.php file.

Add this following code anywhere in the single.php file, wherever you want the related posts section to show up.

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
 
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'showposts'=>3,  // Number of related posts that will be shown.
'caller_get_posts'=>1
);
 
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h2>Related Posts</h2><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
  
<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="350" height="169" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>
  
<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?>

The class used above is “relatedposts”. Use this class for any type of CSS coding required. An example CSS code is given below.

#relatedposts h2 { font-size: 28px; margin: 10px 0px 20px 0px; font-weight: normal; }
#relatedposts ul { list-style: none; }
#relatedposts ul li { float: left; margin-right: 15px; width: 206px; }
#relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }    
#relatedposts a:hover { color: #51B1D3; }

This way you can bring in related posts into any theme weather free or premium version.

FAQs – Related Posts In GeneratePress Theme

How do you display Related Posts in WordPress Site?

Related Posts can be displayed using plugins or without plugins. In this article I have shown a method where we can display related posts using Elements Module and a plugin called WP Show Posts. Followed by applying a code in GeneratePress hook to display related posts on all singular blog posts.

How do I show related posts in GeneratePress Theme?

For displaying GeneratePress related posts, you will need to either perform it by installing a plugin called WP Show Posts or add PHP code to single.php WordPress file. If you want to apply PHP code to single.php file, consider using a GeneratePress child theme.

Which are the best related posts plugins for WordPress?

The best and most popular related posts plugins for WordPress are WP Show Posts, Yet Another Related Posts Plugin (YARPP), and Contextual Related Posts Plugin.

How do I turn off related posts in GeneratePress theme?

If you have made a hook in elements module and installed WP Show Posts, simply thrash that hook, delete WP Show Posts plugin and the related posts section will get turned off. If you have manually coded for related posts into Single.php WordPress file, then simply remove that section of code.

Conclusion

I feel this article has given you an insightful information on how to display related posts in GeneratePress theme.

If you still have any questions, or want to know different ways of achieving this, then do let me know in the comments section.

We shall go through other demonstrations similarly to show you the best results.

Also Read: Remove Built with Generatepress for Free & Premium Themes

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

3 thoughts on “How To Display GeneratePress Related Posts [Step-by-Step]?”

  1. Thanks for this detailed guide, however, WP Show Posts has been replaced by Generate Blocks? Can you show the steps to add related posts to Generate Press (I have GP Premium) using Generate Blocks?

    Reply
    • I am glad you liked it, Coralie. WP Show Posts is getting discontinued was news to me, thanks for the info. Although, they haven’t come up with a full proof process of displaying related posts in GeneratePress theme using GP premium and GenerateBlocks.

      I also checked their latest update on WordPress – it states ‘version 1.4.4’ and QUERY LOOPS (the feature that we need) is still in its beta stage. As per thier official announcement; Dynamic Data, Query Loops, and Image Blocks will be seen in GB version 1.5. Once we get that feature in the plugin, I will surely display the process of creating related posts using GP Premium and GB only.

      Reply
  2. Yes it’s correct that WPSP has been replaced by Generate Blocks but WPSP will be working after the replacement also as confirmed by their customer support. I have integrated related posts with WPSP as explained by the author of this post & it’s working fine.

    Reply

Leave a Comment