How to Display Related Posts in GeneratePress Theme?

Looking to display related posts in GeneratePress theme? In this guide, we will cover all the things needed to display related posts. If you are using the GeneratePress theme in your blog then I think you have made a great decision.

Currently, I am using GeneratePress Premium Theme and I am super happy with the theme. Thanks to the team behind it.

With minimal features, GeneratePress is a fast-loading theme with plenty of features within the theme.

Display Related Posts in GeneratePress Theme

While installing default GeneratePress Theme, it has a size of less than 30 kb. That is why there are things missing in the GP Theme.

If the theme owner includes all the stuff within the theme then it will get heavy. So with a plugin or without a plugin, you can achieve anything you want on your website.

Also Try: Add Breadcrumbs in GeneratePress Theme

Ways to Display related posts in GeneratPress Theme

  1. Using related posts plugin available in WordPress.org directory.
  2. Using custom code in functions.php in Child Theme.
  3. With Code + Plugin Techniques.

In this related posts in the GeneratePress Theme article, we are going to use 3rd steps to achieve related posts below the single article.

I have personally used this method in my blog to show related posts. You can find it after content in the single post.

Showing Related Posts in GeneratePress Theme in WPLogout

Also Read: Remove URL from Author Name in GeneratePress

Steps to Display related posts in GeneratePress Theme

To show related posts in GeneratePress Theme, I have used WP Show Posts Plugin and Elements Modules from the theme. Let’s drive into details.

  1. Install the WP Show Posts Plugin.
  2. Activate Elements Module.
  3. Style Related Posts.
  4. Open Related Posts in New Tab.

1. Using WP Show Posts Plugin

WP Show Posts plugin is developed by Tom Usborne, the person behind the GeneratePress Theme. Without compromising the website page speed I can use this plugin.

So, let’s begin

Install the WP Show Posts plugin.

Go to the WP Show Posts in the sidebar and Click on Add New.

Name the new list as related. As in the screenshot below.

Go to Posts Section > Post type as a post. Taxonomy as a category. Post per page as 3. Remember your Shortcode Post Id. Post ID is needed in step 4.

Related Posts

Go to Columns section > Columns as 3. Columns gutter as 2em.

WP Show Posts Column section

Go to the Images section > Check the Images. Mention the Image width (px) and Image height (px) with 211 and 150 respectively. Image alignment as Center. Image Location as Above title.

WP Show Posts Images Sections

Next, go to Content section > Content type as None. Excerpt length (words) as 30. Check Include title. Title Elements as p. Leave all other as blank.

WP Show Posts Content Sections

Go to Meta section> Uncheck all settings.

Go to More settings > Check Exclude current and Ignore sticky posts and leave all the settings as it is.

WP Show Posts More Settings Sections

2. Using Elements Module in GeneratePress

Now, let’s start our second steps to display related posts in GeneratePress Premium theme.

Activate the Elements Module. Go to Appearance > GeneratePress > Elements > Activate

And

Go to Appearance > Elements > Add New

Choose Element Type as Hook. Name it as Related Post.

Paste the following related posts code in the Hook.

<div class="wpsp-related-posts1  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( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

Use this code only if you need to show related posts by Tags

<div class="wpsp-related-posts1  grid-container">
	<h2>Related Posts</h2>
<?php    
if ( is_single() ) {
        $tags =  get_the_tags();
        $tags_list = [];
        foreach ($tags as $tag)
            $tags_list[] = $tag->slug;
        $tag_string = implode( ', ', $tags_list);
    } else {
        $tag_string = get_tag( get_query_var( 'tag' ) );
    }

    $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
    wpsp_display( $list->ID, 'tax_term="' . $tag_string . '"' );
    ?>
</div>

Go to the Hook Settings and choose the hook to display after_content and check Execute PHP.

Go to the Display Rules and select Location as All Singular and Exclude all the Pages

Display Rules in Elements Module Related Posts

Hit the Publish button.

3. Styling Related Posts

Now, it’s time to style the related posts using CSS.

Go to Appearance > Customize > Additional CSS

Paste the following code in the Additional CSS section. You can tweak the style according to your needs.

.wpsp-related-posts1 {
    background-color: #fff;
    padding: 24px 20px 10px 20px;
    margin-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

4. Open Related Posts in New Tab

Let’s open each WordPress post in the new tab.

With this JavaScript code, you can open each post in the blank page.

As mentioned above go to Appearance > Elements > Add New

Choose Element Type as Hook. Name it as Open Related Post in New Tab.

Paste the new tab JavaScript Code.

<script>
	jQuery(function($){
		$( document ).on( 'click', '#wpsp-2938 a', function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    window.open(url, '_blank');
});
});
</script>

Note: In the above code, at #wpsp-2938, please paste the shortcode post id generated by WP Show Posts Plugin while creating a New List in step 1.

Go to the Hook Settings and choose the hook to display in wp_footer and leave all other settings blank.

Go to the Display Rules and select Location as All Singular and Exclude all the Pages.

Hit the Publish button.

Also Try: How to Host Google Fonts Locally in WordPress?

Conclusion

I hope this Display Related Posts in GeneratePress Theme article helps you to achieve your goal to show related posts in a single post.

If you have any other techniques or any problem please feel free to comment.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

46 thoughts on “How to Display Related Posts in GeneratePress Theme?”

  1. Not working
    when I tried this
    It is showing this message

    Related Posts slug; $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' ); wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' ); ?>
    Reply
    • Thank You, Rajesh for the comment.
      Can you please follow the procedure step by step again.

      I think it will help you to show related posts in GeneratePress.
      If you can’t do it again then you can email me.

      Thanks

      Reply
      • i do all of the stepes and get this code

        slug; $list = get_page_by_title( ‘related’, ‘OBJECT’, ‘wp_show_posts’ ); wpsp_display( $list->ID, ‘tax_term=”‘ . $cat_slug . ‘”‘ ); ?>

        in repleted post area under post

        Reply
        • Hi Alim,
          I think you forget to check Execute PHP in Hook Settings.
          Please try it again. The code is working perfectly.
          Thanks

          Reply
          • Hi Alim, I again checked my code for you and It’s working for me and others too. You are clearly missing something.
            Please try it again and if you can’t solve then email me.
            Thanks

  2. Thank you so much, Bhai for sharing this.
    This is an excellent and easily understandable method. I implemented it. And it is working.

    Reply
      • Hi Suraj,
        I used your code and followed your code but it also shows the text snippet below my Related posts. I don’t want to show that and only want the Headers. Same like your site. How can I make that change?

        Reply
        • Hi Varun, Can you share your screenshot?
          I think you have missed something while following the tutorial. I have checked this guide again and it’s working perfectly fine over here.

          Reply
  3. Hi Suraj, I checked again all the steps and its the same given above. But the posts still shows the text snippet. See attached screenshot pls. – ibb.co/P1n8Zfs

    Thanks for all your help buddy.

    Reply
  4. Its fixed now. Thanks a million! You are the best.
    One more help – How do you have Featured Posts in Bold letters and how to make it sticky?

    Reply
  5. Hi Suraj,

    I got this working but I want to show related posts by tag instead of category. Is there a way to adjust the code to do this?

    Reply
    • Hi Sam, You can show a related post by Tag. Go to your related posts settings in WP Show Posts > Posts > Taxonomy > Choose post_tag > Choose the selected tags and I have added the code above in the tutorial. Please check. Thank You.

      Reply
      • Hi Suraj,

        I tried adding the code but its not working. When I check the post it just shows the code instead of the related posts.

        Also, you say to “Choose the selected tags ” but I want it so it shows related posts with the same tag as the post its on.. so it is dynamic, like it does with the categories code.

        is it possible?

        Thanks

        Reply
  6. Hey, Suraj!

    Thanks for the tutorial. I was wondering if it’s possible to make it so that if there are no related posts to show (I’m using tags), instead of showing the message “sorry, no posts to show,” it would then show posts on the same category.

    So instead of using tags to show related posts, it would switch to category if there are no other posts with that same tag.

    Reply
  7. Hi Suraj

    Great work here!

    One thing I encountered was that, when using sub-categories, the code doesn’t reference the parent category if there are no other posts in that sub-category.

    Is there a way to modify it so that, if it doesn’t find any “related posts” it serves up any three posts from the website? I am using it more as “you may also like” rather than related posts to try to increase time to on site.

    Thanks

    Mac

    Reply
  8. Hi Suraj,

    Great Post. I just installed the GeneratePress theme and was looking for the solution to show Related posts.

    One quick question: which plugin do you use to show related posts in the form of “Also Try” and “Also Read” within the content?

    Reply
  9. Hey Suraj

    You’re best, you made my day ))
    I’ve tried and both methods work for me.

    I just want to ask, is there any way to modify “related posts by Tags” to show when 2 or more tags will match?

    Thanks again! ))

    Reply
  10. Works great, thank you for a clear explanation. How can I make it show only three posts at a time? It currently makes a huge list of all the posts I have in that category.

    Reply

Leave a Comment