Get 10% Discount On GeneratePress Premium Theme Avail Now

How to Display Related Posts in GeneratePress Theme 2020?

Learn, How to Display Related Posts in GeneratePress Theme.It is so simple ! You just need to follow and show related posts in GeneratePress theme.

If you have purchased GeneratePress premium theme and want to customize it to show related posts in GeneratePress theme, then follow me along.

For your kind information, GeneratePress is one of the fastest and lightweight theme to use on your site.

  • Save

Recommended : GeneratePress Review

Benefits To Show Related Posts In GeneratePress Theme

When you write a post and publish it, you readers are always eager to read related post also.

If you website is showing related posts in a styling way, your readers will definitely spend more time on your site.

It will decrease your website’s bounce rate, which helps to get more organic traffic.

Besides it popular search engines like Google, yahoo, Bing etc. prefers those sites in their SERPs, which have well designed structure.

So let’s get started :

Related: How To Host Google Fonts Locally To speed Up Website Speed

Methods To Display Related Posts In GeneratePress Theme

In this particular post we will use a popular WordPress plugin Wp show posts, some CSS and code snippet plugin to show related posts in GeneratePress theme.

Steps To Display Related Posts In GeneratePress

Whenever, you want to customize a theme, you must use only that WordPress theme which can be customized easily.

And, there is none other than GeneratePress Premium theme.

I have provided a nice and professional look to my website by using some plugins and Additional CSS module provided by the Developer Tom Usborne.

Also Read : Remove URL Field From Comment Form In GeneratePress

Step 1. Install WP Show Posts Plugin

WP show Posts plugin is developed by Tom Usborne himself.And it’s reliable to be used.

  1. Log in to your WordPress account.
  2. Go to Plugins > Add New > search > WP Show Posts
  3. Install and activate it.
  • Save

Step 2. Give Name To The Title

  1. Now click on WP should Posts > Add New.
  2. Then Give name to the Title ‘Display Related Posts‘.
  • Save

Customizing WP Show Posts

Now we will customize this plugin settings.So that it looks like attractive to read.

Step 1. (posts)

  • Go to Posts Section > Post type as a post. Taxonomy as a category.

Here under category your website’s all categories will get populated.

  • You need to check all of them
  • Put 3 in Post per page 
Posts section
  • Save

Step 2. (Columns)

  • Now go to Columns Section > Put 3 in Columns and type 2em in Columns gutter.

Note: You can put 6 in columns, if you want to display 6 posts per page.

Columns section
  • Save

Step 3. (Images)

  • Then, move to the Images section > Check the Images box.
  • Put Image width 200 & its height 150.
  •  Choose Image alignment Center. 
  • Image Location as Above title.
Image section
  • Save

Step 4. (Content Section)

Moving to next section,

  • Go to Content section > Content type as None.
  •  Excerpt length 30.
  • Check Include title Box. 
  • Title Elements as p.
  • The rest of the options will remain as it is.
Content type
  • Save

Section 5. (Meta Section)

Under this section you need to unchecked all the options as shown in the below snap shot :

Meta element
  • Save

Section 6. (More Setting)

Lastly, follow the remaining steps :

  • Go to last section >  More settings.
  • Check(√) Exclude current box.
  • Also check (√) Ignore sticky posts box.
  • Leave others blank.
Advance settings
  • Save

Steps To Display related Posts in GeneratePress Theme.

Now, if you are using GeneratePress Premium Theme, You can show related posts on any of your website’s place.

Firstly activate the premium Elements Module. Go to Appearance > GeneratePress > Elements > Activate All Modules

Display Related Posts In GeneratePress Using Elements Module

Now we will use some php code to display related posts in GeneratePress theme.

Element module
  • Save

Firstly, activate all the GeneratePress Premium Modules as follows :

Go to Appearance > GeneratePress > Elements > Activate

GenetatePress theme modules
  • Save

Now,

Go to Appearance > Elements > Add New

Choose from drop down menu Hook. Name it as Related Posts.

And paste the following code :

And make sure, you select “After_content” under hook element.

<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>
Add new element
  • Save

Next, you will select the options regarding display rules and Exclude Rules as under :

Go to the Display Rules and select Location as All Singular and Exclude all the Pages and Hit “Publish” Button.

Display rules
  • Save

Styling Related Posts In GeneratePress Theme

GeneratePress theme is one of the best lightweight and easy-ti-customize theme.

Without needing a child theme, we can style various parts of our website.

Now in order to Display related posts in GeneratePress Theme, we will put some CSS in the additional CSS section of GeneratePress premium theme.

Put the following CSS shot in the Additional CSS.

Nite: you can change the colours, padding, margin, box shadow according to your need.

.wpsp-related-posts1 {
background-color: #fff;
padding: 24px 20px 10px 20px;
margin-top: 50px;
margin-bottom:10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
border-radius: 10px;
border-left: 2px solid #115cfa;
border-right: 2px solid #115cfa;
}

Final Words : How To Display Related Posts In GeneratePress Theme

Finall, I hope you have learnt this easy trick to show related posts in GeneratePress with beautiful styling.

There are other plenty of ways to display related posts.If you have found another way, Do share it with us.

  • Save

I am Kuldeep Singh a teacher by profession and blogger by great passion. You can learn here blogging related tips and tricks.

Leave a Comment

Share via
Copy link