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>

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.

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 all things having to do with WordPress, Digital Marketing, Social Media. Blogging has been my Passion. I'm interested in Literature and sometimes, loves to write.

Leave a Comment

Download Brave Browser with AdblockerInstall Brave Now
+ +