How To Display Related Posts In GeneratePress Theme?

If you are looking to display related posts in 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.

On BloggingIdol, we are using GeneratePress premium 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 GP premium. Moreover, you will be amazed looking at all the possibilities you can achieve using the ELEMENTS module, in GeneratePress 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.

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

bluehost hosting banner

3 Ways To Display Related Posts In GeneratePress Theme

  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 on how to display related posts in GeneratePress theme using WP Show Post Plugin, PHP Code for creating a Hook and CSS Code for Styling Related Posts.

How To Display Related Posts In GeneratePress Theme?

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

Later, some intial 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
GeneratePress WP Show Posts plugin from WordPress repository

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.

WP Show Posts post tab - like display posts by category wordpress

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.

WP Show Posts - Columns Tab

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.

WP Show Posts - Images Tab

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

WP Show Posts - Content Tab

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

WP Show Posts - Meta Tab

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.

WP Show Posts - More Settings Tab

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.

GeneratePress Related Posts Hook

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 premium version of GeneratePress.

If you do not have the premium version of GeneratePress. I urge you to go through my article of GeneratePress Theme Review. It will help you understand all of its features in detail, and most probably you might take the right decision.

Let’s start by creating a GeneratePress element hook.

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

go to generatepress elements from wordpress dashboard

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

generatepress element hook

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

related posts in generatepress theme - hook creation
GeneratePress Related Posts Hook

Use the following code to apply on your website, to achieve similar results.

<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.

related posts in generatepress theme hook settings
related posts in generatepress theme hook display rules

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

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 puposes only.

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

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

related posts in generatepress theme 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 its the Author Box in Generatepress.

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 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?

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 a plugin called WP Show Posts. Followed by applying a code in GeneratePress hook to display related posts on all singular blog posts.

Whcih 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?

If you have made a hook in GeneratePress, simply thrash that hook 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.

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

Leave a Comment