How to Display Related Posts in WordPress Without Plugin

Are you looking for ways to display Related Posts on your WordPress website?

Including related posts, often known as Recommended Posts or Similar Posts, below your blogs can effectively engage your website visitors.

That’s why many site owners already use related posts to reduce the number of visitors leaving their site after reading an article.

The related posts section acts as a glue that links different posts together.

Adding or displaying related posts on your site without a plugin is advisable, because it can affect page speed because plugins often require additional CSS and JavaScript files to be loaded on the page.

In this article, we’ve listed 2 methods to display related posts without plugins.

Let’s begin.

Why Add Related Posts at the End of a Blog Posts?

Related post is a highly functional feature found on most WordPress websites. It can benefit your WordPress site in several ways.

Here are some of them:

Enhanced User Experience: Displaying related posts is a convenient way for users to discover articles relevant to their interests.

Increased SERP (Search Engine Result Ranking): Internal linking strategy is crucial for On-Page SEO and search engine optimization. Besides, related posts help build internal links and assist search engines in understanding your site’s structure, resulting in increased SERP.

Enhanced SEO: Search engines consider user engagement as a ranking factor, so showing related posts can positively impact your search engine rankings.

Reduced Bounce Rate: Engage visitors with relevant content to keep them on your site longer. This not only decreases the bounce rate but also indicates a successful website.

Access to the Old Content: Add relevant articles at the end of each post to bring attention to older content on your blog. As a result, this will showcase the hidden content and make it more accessible to your visitors.

Although related posts will be shown automatically, we’ll ensure readers only see posts relevant to their current post’s content.

You can determine what posts are relevant to the current post using tags, categories, and taxonomies.

Now, let’s dive into how to display related posts in WordPress.

Method 1: How to Display Related Posts in WordPress Using Code

In this section, we’ll see how you can add related posts to your WordPress website using code in a few simple steps.

Firstly, add the following code to the functions.php file. If you’re using a child theme, add the code to the functions.php file of your child theme.

<?php

// ********* BEGIN HERE *********

function cc_related_posts($args = array()) {

    global $post;

    // default args
    $args = wp_parse_args($args, array(
        'post_id' => !empty($post) ? $post->ID : '',
        'taxonomy' => 'category',
        'limit' => 3,
        'post_type' => !empty($post) ? $post->post_type : 'post',
        'orderby' => 'rand'
    ));

    // check taxonomy
    if (!taxonomy_exists($args['taxonomy'])) {
        return;
    }

    // post taxonomies
    $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));

    if (empty($taxonomies)) {
        return;
    }

    // query
    $related_posts = get_posts(array(
        'post__not_in' => (array)$args['post_id'],
        'post_type' => $args['post_type'],
        'tax_query' => array(
            array(
                'taxonomy' => $args['taxonomy'],
                'field' => 'term_id',
                'terms' => $taxonomies
            ),
        ),
        'posts_per_page' => $args['limit'],
        'orderby' => $args['orderby'],
        'order' => $args['order']
    ));

    if (!empty($related_posts)) { ?>
        <div class="related-posts">
            <h3 class="widget-title"><?php _e('Related articles', 'textdomain'); ?></h3>

            <ul class="related-posts-list">
                <?php
                foreach ($related_posts as $post) {
                    setup_postdata($post);
                    ?>
                    <li>
                        <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php if (has_post_thumbnail()) { ?>
                                <div class="thumb">
                                    <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
                                </div>
                            <?php } ?>
                            <h4><?php the_title(); ?></h4>
                        </a>
                    </li>
                <?php } ?>
            </ul>
            <div class="clearfix"></div>
        </div>
        <?php
    }

    wp_reset_postdata();
}

The next step is to call the function cc_related_posts() wherever you want in your template. Usually, you’ll want to add it in the single.php file after calling the_content().

Additionally, the function itself is quite versatile and can be used with several arguments to display related posts according to the requirements of your WordPress site.

Some examples are:

Displaying 3 Related Posts:

The default argument of the function is to work by categories, where only 3 posts will be displayed, but if you want to change the number of displayed posts, simply use the limit argument, as in the following example:

<?php
cc_related_posts(array(
    'limit' => 6
));
?>

Displaying Related Posts Based on Tags:

The following code fetches related posts based on the defined criteria and displays them in a list:

<?php
cc_related_posts(array(
   'taxonomy' => 'post_tag',
));
?>

Save it and visit the post on your website to see the related posts.

Method 2: How to Display Related Posts Using WordPress Theme

We understand the pain of adding code if you’re not technically inclined and want to avoid the hassle of writing code to display related posts.

Luckily, there’s a solution that makes the process much more accessible for everyone – using Responsive theme by Cyberchimps.

Responsive theme makes it easier than ever to implement this feature.

Let’s see how you can display related posts using Responsive theme customizer.

Firstly, you need to install and activate the free Responsive theme.

Step 1: Install and Activate Responsive theme

Log in to your WordPress website and follow these steps:

• Navigate to Appearance > Themes.

• Click on the Add New button.

• Next, enter Responsive in the Search theme field and click on the Install button.

The theme installation will take some time. After it is finished, you will be notified that the installation was successful. 

• Click Activate once the installation is complete.

You should now be able to see your new theme in action if you visit your website.

Step 2: Visit Responsive Theme Customizer

• From your blog post, navigate to Customize to start editing related posts.

• Click on Blog / Archive and then select Single Post.

• Scroll down and tick the Enable Related Posts checkbox to add it to your blog.

Step 3: Start Customizing Related Posts

Choose from the customization options available here and start editing.

1. Section Title: Let you change the title of the post.
2. Title Alignment: Change the positioning of the title on a page, such as left, center, or right alignment, to create a visually appealing layout.
3. Related Posts Count: Choose the number of articles from a related category or tag to display on a page based on your design preferences or content amount.
4. No. of Posts Per Row: Choose how many related posts to display per row to optimize space utilization.
5. Related Posts Taxonomy: Choose between “categories” or “tags” to fetch related content. Categories represent broader topics, whereas tags are more specific descriptors.

• Edit Related Post Structure and Related Post Meta Elements. 

Related Post Structure involves the layout or format in which related blog posts are presented on a website.

It involves organizing, displaying, and structuring these posts to enhance user experience and engagement, such as:

• Featured Image: The image associated with the blog post, which users can see.
• Title: It’s the post’s title, which serves as a link to the full post.
• Excerpt: A short summary post’s content, providing a glimpse of what the post is about.

Related Post Meta Elements are additional information related to a post that can include various details. Usually, these components are placed next to or below the relevant posts.

They can include various information such as: 

• Author: The name or username of the post writer.
• Date: Indicates the post’s publish date.
• Categories: The category assigned to a post helps readers understand its subject.
• Comment: It refers to the number of discussions on a blog post.
• Tag: These are keywords or labels used to categorize content.

These meta-elements inform users about the related posts, making it easier to decide which posts to explore further.

Step 4: Enable/Disable Post Elements in Related Posts

You can hide or disable any elements by clicking the eye icon next to the element’s name.

You can also reorganize the elements by dragging and dropping them.

Once you’ve completed the above steps, click on Publish.

And you’re done! The related posts will now appear on your blog posts.

FAQ

Conclusion

Responsive theme has many features built-in that can help you get things done without relying on third-party plugins.

Furthermore, take some time to explore the Responsive theme and get the most out of it.

Related posts make a huge difference in how people engage with the articles you write, whether they are on your blog, store, or corporate website.

Take your website’s user engagement and retention to new heights with Responsive theme.

If you enjoyed this article, you may also find these articles interesting:

• How To Add Blog Posts To Pages In WordPress?- An Easy Guide
• WordPress Sticky Posts: How to Use & Style Them
• 5 Popular Post Widgets for WordPress that Boost Pageviews

Grab the Responsive theme to start building your WordPress website today!