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

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

If the theme owner includes all the stuff within the theme then it will get heavy. So with 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
Steps to Display Related Posts in GeneratePress Theme
1. Using the WP Show Posts Plugin
2. Using the Elements Module in GeneratePress
3. Styling Related Posts
4. Open Related Posts in New Tab
Conclusion

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 the content in a single post.

Showing Related Posts in GeneratePress Theme in WPLogout

Also Read: Remove URL from Author Name in GeneratePress

Note: Now, you can migrate your related posts from WP Show Posts to Generateblocks using this tutorial

Steps to Display Related Posts in GeneratePress Theme

To show related posts in GeneratePress Theme, I have used the WP Show Posts Plugin and Elements Modules from the theme. Let’s dive into the 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 the WP Show Posts Plugin

Tom Usborne, the person behind the GeneratePress Theme, develops the WP Show Posts plugin. 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 others blank.

WP Show Posts Content Sections

Go to the 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 the Elements Module in GeneratePress

Now, let’s start our second step 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 a Related Post.

Paste the following related postcode 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>

Check Out: GeneratePress Review

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 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;
}

Update

If you want to show the related posts in a number list (not thumbnail-related posts) then you simply have to adjust some settings as mentioned below from the above WP Show Posts plugin settings and use the CSS code.

Go to Posts Section > Posts per page as 5 or 10 (as you wish)

Go to Columns section > Columns as 1

Uncheck the Images option from the Images menu.

Note: You need to remember your wp show posts shortcode ID as mentioned on the screenshot above and change the shortcode post ID in the below CSS code. Here I have #wpsp-2938 shortcode post ID in the CSS code, please change it and see the result.

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

#wpsp-2938 p{
    counter-increment: wplogout-list;
    margin-bottom: -25px;
}

#wpsp-2938 p:before { 
    content: counter(wplogout-list) ". ";
    color: #1b78e2;
}

Result for the related post by list

Related Posts in number list

4. Open Related Posts in New Tab

Let’s open each WordPress post in the new tab. (This is an optional part)

With this JavaScript code, you can open each post on 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 of showing related posts in a single post.

If you are searching for more GP-related tutorials then you can check the GeneratePress Category for more

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

Share:
Recommended Reading...

How to Add Meta Description as Excerpt in GeneratePress?

How to Add ALT Text to Gravatar Images in GeneratePress?

How to Add Phone Number and Email in GeneratePress Header?

[Fix] Links Do Not Have a Discernible Name in WordPress

How to Switch your WordPress Theme to GeneratePress?

How to Add GenerateBlocks Pattern Library in GeneratePress?

How to Migrate WP Show Posts Plugin to GenerateBlocks?

How to Add JavaScript in GeneratePress Theme?

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

171 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

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

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

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

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

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

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

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

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

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

  18. Hey!
    Have WP Show Posts. My question is if you can get the latest post in Widget. My blog page shows latest posts. I have a static page and I wonder if I can in any way get the latest posts on this page with WP Show Posts.

    Reply

    • Hi Sven, Static page means like a homepage?
      You get shortcodes while creating New List using WP Show Posts and on a static page, you can use Custom HTML block and paste the shortcode.
      Thanks

      Reply

  19. Hello sir
    I am Ankit Yadav from India,
    I put the code of the display related post in my blog but the code is not working and the wordpress debugging error is coming up, how will Solve.

    Reply

    • Hi Ankit, I think you missed some steps. Please follow step by step process again and let me know the exact problem with screenshots.
      Thanks

      Reply

  20. Hey hi,
    I used that above plugin and everything went right till end. But tell me process after it.
    Like where to and how to use that shortcode.
    As, after using the plugin their is no reflections of related posts onto my website.
    Please guide me!

    Reply

    • Hi Yash, Did you follow the tutorial? The related post is displayed just after the content. You can use shortcodes anywhere just like in the middle of the post, on the page.
      Thanks

      Reply

  21. .page-numbers {
    padding: 4px 6px;
    background-color: #187cd6;
    border-radius: 5px;
    color: #fff!important;
    border: 2px solid #187cd6;
    margin-right: .25em;
    box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
    }
    This is CSS code for customize your pagnination like wp logout

    Reply

  22. Hello thanks for the tutorial, it worked fine. Please i will like to display it only on desktop view, how can i do that.
    thanks

    Reply

  28. The procedure did not work for me. Seems to me there is a problem with the first code.
    I get a prompt to debug my WP after adding the code.

    Reply

    • The code is working perfectly since I am using the same code in my blog too. There are two codes i.e. for categories and tags so, use only one code and follow each step.
      Thanks

      Reply

  30. Hi Suraj!

    Thanks alot for the time you put into this.

    Ive followed all the steps and it works fine however i get “no related post” on the index page for some reason with no content under it.

    Even thou i have excluded all pages.
    Its not visible on other pages i should mention. Any idea why?

    Reply

      • Hi Suraj, Thanks for response.

        on both hooks relateda and open related posts i have the following setup on the rules tab of the hook.

        Place: All singular
        Exclude: Page – All Pages

        Reply

          • Hi! It appears on index and i don’t want it there 🙂
            So only on posts.

            Example: ekonomitips.nu (check at the end at index)

            It works properly on post.
            It works properly on all pages except index (properly: not showing)

          • You can use Posts > All Posts rather than All singular. If still you face the same problem then email me.
            Thanks

  31. Hey, Suraj
    Thanks for this article its really helpful. Can you please tell me how can I add popular post list in generatpress without plugin.

    Reply

  33. Thanks again, bro. The related post is working fine.

    I recommend to change two things:

    1. Change columns gutter to 1em (This will remove the extra white space between related post items and it will look more user-friendly).

    2. Set image size as your original featured image size i.e 640*380 (This will show uncut & full-featured image, even in the mobile version).

    Change these two things and thank me later 😉

    Reply

      • I set the priority to a higher number. I tried 9, 20, 50, and 99. None of these moved the recent posts under the author box. It instead placed the recent posts in the middle of the author box. I then tried lowering the priority of the author box, to no avail. Also, I can’t seem to make only the title show. I set the content to “none” and the exerpt to 0 with title checked. I am struggling to make it as I want.

        Reply

    • Hi Aakash,
      I think you are missing some steps. I have been using the same code for a long time. Please carefully try once again.
      Thanks

      Reply

  41. Thanks for sharing your tip.

    I’d like to use bullet points for the list of the related posts (I don’t use images).

    Where I can change your code (and how) to do it?

    Reply

  42. Firstly thanks for sharing..

    I have two question/problem..
    1) How to separate the section as on your post “Related post and admin bio both section is separate from post.. how to do it ?

    2) My related post worked well but don’t show up when i logout from my WordPress site.. But when i login and browse those post i see the related post is visible. how to make it available for user?

    Thanks again

    Reply

    • Hi Lazaro,
      1. I don’t have background so it seems to be outside but also you can play with hook elements.
      2. I think you are missing something in related posts. I am using the same code and it’s working fine at my end. Please again check the code and settings.
      Thanks

      Reply

  43. Hi Suraj, How to control the number of posts in the related post section? I want to show only 9 related posts, how can I do that?

    Reply

  45. Suraj, I have been using a simpler solution but also with wp show post and hooks. I noticed that among the recommended articles the same article you just read (as a visitor of my page) can also be recommended. How would i go about configuring the code so it won´t show the current article, where the recommended list is shown
    Greetings

    Here my simpler version:
    You may also like
    [wp_show_posts name=”recommended”]

    Reply

  46. Hi Dear
    I tried the elements, but it shows the message

    Oops! That page can’t be found.
    It looks like nothing was found at this location. Maybe try searching?

    Where is the problem, please?

    Reply

    • Hi Ayusy,
      Without a look at the site, I can’t tell you where the problem is.
      I hope you are going to fix it soon.
      Thanks

      Reply

  51. Your blog has helped me a lot!

    can I exclude so that the posts of a category do not appear in the results?

    Thank you so much

    Reply

    • Hi Astur,
      I think you can do it from WP Show Posts > More Settings, there is an option to exclude posts using Post IDs.
      Thanks

      Reply

  53. Hi, Suraj
    By following your steps, I can see the related posts, but the home page breaks.
    The home page now looks like on a tablet and this message appears: ‘There has been a critical error on this website’.

    In addition, the Related post element appears at the bottom of the home page when it shouldn’t.

    What can it be?

    Reply

    • Hi Jose,
      I am using the same method for related posts.
      Please exclude your home from WP Show Posts and check it. I think it will work.
      Thanks

      Reply

      • Home page is excluded and it’s failing!!
        This method theres a better method of using WP Show Posts to display posts within the same category – see here:

        generatepress.com/forums/topic/related-popular-posts-widget/#post-1785158

        Thanks

        Reply

  54. Hi Suraj,
    thank you for offering in-depth help for a much-needed solution, much appreciated! I made everything work, but I’m wondering how I could combine your (otherwise separate) code snippets in order to display a mix of related-category AND related-tag posts in the same list/cluster? My reason is that in some cases, my posts are not tagged and the (currently separate) “related”- list would then display “nothing found” across all those posts. Another option might be to hide that entire list all-together? How would I do that? 🙁

    Reply

  55. Hi Suraj Katwal sir,
    I am Generatepress premium user and I am reading all of your Generatepress related posts. Your all post are ultimate and unique. I am big fan of your content. Sir please write a post or share a link of post where you have shown how you have designed sticky sidebar on your site in generatepress.

    Reply

  56. Thank you very much for your excellent code to display related posts.
    Could you please suggest a code to display in CPT?

    Reply

  63. Hello, there!
    I want to display 3 previous and 3 next posts from the category/subcategory of the post itself. Let’s say I publish lessons on my site. On the post page where my 10th lesson is published, I want to display the 9th, 8th, 7th lessons under the “previous posts” title and also display the 11th, 12th, 13th lessons under the title “next posts” title.

    In short, do you have any code to do something as I described with WP Show Posts plugin.

    Reply

  66. Hello, Suraj
    I have tried it and it works perfect, but wouldn’t you know how to limit the length in characters or words of the displayed titles.
    Regards

    Reply

  67. Hi Suraj,

    Thank you for offering in-depth help for a much-needed solution, much appreciated!

    I use Elements Module in GeneratePress to display related posts. Everything works like a charm.

    I’m wondering how I could display latest related posts. Currently, I see a random selection of related posts, a mix of latest and old posts.

    Many thanks

    Reply

  69. Good afternoon, can you help me? I wanted the related posts to appear only publications of the publication category, is it possible? In this way, the related post appears in the article of all categories, I would like that, for example, if I am in a card article in the related post, I would like it to appear only articles from the card category and not an article from the finance category, for example.

    Reply

  71. Hi Bro,

    I’ve done all the steps. I am getting an error showing “Sorry, no posts were found.”

    Please help. My website name (if you want to check): sooryatej (.) com

    Reply

  72. Hi Suraj,

    Thanks for this article, very clear instruction and works really well. Just one thing I try to figure out but no luck so far, could you please help?

    The Related Post section is very close to the post content – like there is no margin/gap between them. How to increase the top margin of the WP Show Post part so it gives more space?

    Thanks in advance!

    Reply

  73. this script is not working on my site:

    #wpsp-2938 p{
    counter-increment: wplogout-list;
    margin-bottom: -25px;
    }

    #wpsp-2938 p:before {
    content: counter(wplogout-list) “. “;
    color: #1b78e2;
    }

    #Note: i have been change ID to my own.

    Reply

  74. Hi I’m currently facing an issue while applying the 2nd method. It says that Unable to execute PHP as DISALLOW_FILE_EDIT is defined. how can I fix this?

    Reply

    • Hi Rajkumar,
      Please use Generateblocks Pro to get related posts features. I think I have one tutorial regarding it or check official website for tutorial.
      Thanks

      Reply

  78. The problem is that you cannot download WP Show Posts anymore since Generatepress bundled this plugin into their Pro Package.

    I want to use functions to show related posts until I upgrade my theme. Can you discuss using custom code to make this work?

    More plugins means more requests and slower page loading speeds. For example, look how this post needs related posts underneath the blog post:

    expatkings.com/best-countries-for-black-men-to-find-gf/

    Please update this article to include related posts without using plugins.

    Reply

Leave a Comment