4 Easy Steps 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.

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.

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.

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

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.

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.

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.

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

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.