Maintaining your “user-ship” in the web industry is crucial. Allowing users to navigate throughout your site from topic to topic makes for longer browsing time on the site. The more engaged your visitors are, the better chance they will convert into a lead or a sale.

This post will teach you how to install related posts manually, as well as with a plugin, and explain the benefits of using related posts on your blog.

Adding Related Posts Manually

Lets say we want to add a related posts section at the end of each blog post we create. After each post we will insert 3 related posts that will be determined based on their content. To decided which articles are related, we will compare the articles’s “tags.”

I’ll be using our Divi 2.0 theme for this tutorial. If you want to follow along I recommend you make a local installation of your WordPress site for testing purposes. While I am gearing this tutorial towards on Divi theme, This code should work on any theme.

Open your theme in a code editor like I have below:

Our divi theme open in a code editor.

Since we want to add our related posts functionality within each individual blog post, we need to work primarily inside our single.php file. Ideally I would make a widget area out of the related posts section, but that’s beyond the topic of this tutorial. Instead I will add the code we need directly to our file.

The Code

Here’s the code we will be adding to our file. This will live below every blog post.

    
Related posts
    ID);

        if ($tags) {
            $tag_ids = array();
        foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
            $args=array(
                'tag__in' => $tag_ids,
                'post__not_in' => array($post->ID),
                'posts_per_page'=>4, // Number of related posts to display.
                'caller_get_posts'=>1
            );

        $my_query = new wp_query( $args );

        while( $my_query->have_posts() ) {
            $my_query->the_post();
        ?>

        

            <a rel="external" href="">

            
            
        

        
    

If you look inside your theme’s single.php file, you can probably spot where the post ends. Inside our Divi theme there is an article tag: 

This defines the entire blog post we are working with. I have added our “related posts” code right after our article, following the endwhile tag:

We have added our PHP code to get our related posts to output

**Important Note** – the Divi theme already supports custom post thumbnails. These are the feature images you can add to each blog post. If you aren’t sure what this entails, check out the WordPress.org codex entry.

I have also added some sample content to a local installation of the Divi theme to use as a guide in this tutorial. To do this I recommend using a neat plugin called Fakerpress. It will generate posts and pages more quickly and easily, giving you some sample data to work with. This should not be used on your live installation.

I have also took the liberty of adding a tag called **sample** to about 4 blog posts. Doing this will make our related posts code function flawlessly. With each new blog post, use the tagging function to make your posts relate in the best way possible. Posts that share the same tag will be considered “related.”

Our related posts work via the tagging feature in WordPress.

For each of my 4 new posts, I have also added featured images. This will make our related posts layout a bit more eye-catching. Here’s an example:

Be sure to set a feature image for the most pleasing user experience.

So now with our content added, we have a group of 3 related blog posts at the end of our main post. Check out the results:

Our full blog post with related posts following.

Great! It’s working, but lets style it up to make it look a bit more presentable. Add the CSS below to your `style.css` file, or whichever stylesheet you are using for your theme.

CSS

.single .relatedposts .relatedthumb {
    display:inline-block;
    width: 32%;
}

Essentially all we did was float each related post to display alongside each other, making things a bit easier to read.

Our related posts with some CSS

Optimizing Your Blog To Display Related Posts

With our code implemented, all you have to do now is remember to tag your posts with each new post you create. Tags imply associations or relations between each post, which in result, renders the appropriate posts as the related posts being displayed. Pretty cool!

Related Post Plugins

Sometimes you don’t want to hardcode features into your theme. WordPress plugins are the perfect way to avoid messing with your theme’s code. Let’s say, for instance, you have a blog with a sidebar always present. In the sidebar you have a number of widgets, and you want one containing related posts to keep your users engaged. If this sounds like something you need, you’re in luck. There are a number of easy to use options available. Lets uncover a few.

Related Posts

Related PostsP Plugin

The Related Posts plugin is used to link your posts to related content within your website automatically. You can get attention from other authors and produce great internal links. This all happens with just a few clicks.

Yet Another Related Posts Plugin

Yet Another Related Posts Plugin

With the YARPP plugin, you can display a list of related posts on your site based on their unique algorithm. Unlike some plugins, which only use Tags or Categories to relate posts, YARP uses additional factors to try and improve accuracy. You can even earn money by including sponsored content if you want, which is a nice feature for those looking more additional revenue streams.

CP Related Posts

CP Related Posts Plugin

CP Related Posts displays related posts on your blog, based on a few different factors. Relationships between posts are developed based on keywords in the content, the post excerpt, as well as tags. This is a unique method when compared to some of the other plugins available. The plugin also offers some great display settings, allowing you to customize the output of the related posts feed. Some of the features include being able to adjust the amount of posts displayed, the type of layout used, and what information is displayed within each post (such as author, title, meta data and so on).

Related Posts via Categories

Related Posts via Categories Plugin

The Related Posts via Categories plugin displays related posts based solely on the category that your post is in. Each post will display a list of posts within similar categories. While simple, this is still a pretty good method for decided whether or not two posts are related to each other.

Related Posts via Taxonomies

Related Posts via Taxonomies

Related Posts via Taxonomies will display a list of related posts after all posts, or a subset of posts that you select. The posts are related based off the categories, taxonomies and group of tags that any given post is placed within.

Final Thoughts

Related posts are a great way to keep your blog engaging for your users. The more posts visible which are related to the blog your users are reading the better. Each relation could mean more time on your website. This in return helps you and your users find the content they have been looking for.

Article thumbnail image via shutterstock author ratch

The post How To Display Related Posts In WordPress appeared first on Elegant Themes Blog.