How to Display Custom Related Posts in WordPress Step-by-Step Guide

Add Custom Related Post

Are you interested in featuring related articles on your WordPress website?

Incorporating related posts on your WordPress site can enhance user experience by guiding visitors to discover additional content, fostering engagement, reducing bounce rates, and boosting overall pageviews.

In this guide, we’ll demonstrate how to seamlessly showcase related posts within your WordPress website.

Why Does WordPress Display Related Posts?

The importance of displaying related posts in WordPress becomes evident as your website expands. In the initial stages, navigating through your content is relatively straightforward for readers. However, as your site grows with an increasing number of articles, locating essential posts can become challenging for visitors.

To address this issue and facilitate easy content discovery, one effective strategy is to showcase related posts. By doing so, you not only highlight your best content but also keep your audience engaged, ultimately reducing bounce rates and enhancing the overall user experience on your site.

Follow as a Step by Step Guide

Highlighting related posts is a crucial aspect of a blog website, and while numerous WordPress themes include built-in related post features, GeneratePress Premium may lack this functionality. In this tutorial, I’ll guide you through the process of adding related post features to your website using a plugin.

Step 1 :- Log in to your WordPress Dashboard.

Step 2 :- Click on Plugins > Add New Plugins.

Step 3 :- In search box type “WP Show Post” then Install and Activate it.

Step 4 :- Now click WP Show Post >Add New.

Step 5 :- Add title and below we can see that,

• In Post > Posts per page – Replace 10 to 4.
• In Columns > Columns – Change 2 to 4.
• In Images > Image location – Change Below title to Above title.
• In Content > Content type – Change Excerpt to None & Title element – Change h2 to h3.
• In Meta > Untick to  Include date.
• In More Settings > Tick to Exclude current & Tick to Ignore sticky posts
• And Click on Publish

Step 6 :- Now click Appearance > Elements > Add New Element > Choose > Hook > Create > Add title.

Step 7 :- Now copy below HTML Code & paste in below box.

<div> <h2 class="wpsp-related-title">Related Posts</h2> <?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( 1634 ); ?> </div>

Step 8 :- Here Replace 3rd point to your WP Show Post Function Code in HTML Code box

/* Related Post CSS */ .wpsp-related-title { padding-top: 20px; } .wp-show-posts-image img { border-radius: 10px; box-shadow: rgba(23,43,99,.2) 0 5px 25px!important; }

• In Setting > Hook – Change to wp_head to generate_after_content and tick mark to Execute PHP & set 21 for Priority.
• In Display Rules > Location – Choose to Post and Publish it.

Step 9 :- Now visit your website post and check below the post.

Step 10 :- Then we need to change style for that copy below CSS Code and paste it in Appearance > Customise > Add New Element > Additional CSS – Paste it below and Publish it.

/* Related Post CSS */ .wpsp-related-title { padding-top: 20px; } .wp-show-posts-image img { border-radius: 10px; box-shadow: rgba(23,43,99,.2) 0 5px 25px!important; }

That’s it now open your website post and check below post content we can see that Custom Related Post.

Add Custom Related Post

After successfully implementing the code to integrate related posts at the end of your content, take a moment to review your blog posts and ensure that the feature is functioning as intended.

We trust that this tutorial has equipped you with the knowledge on incorporating related posts in WordPress. Additionally, Add Custom Related Post consider exploring our guides on selecting the optimal blogging platform and discovering essential WordPress plugins and tools for an enhanced blogging experience.

For more WordPress Tutorials Subscribe to Raju Digital Services

And Also Read How to Speed Up WordPress Website