How to Display Related Posts in WordPress

Related Posts are used almost all type of Websites. Because it’s an easy way to increase page views and page rank. Visitors visit a page via Search Engines, Social Sites, advertisement links, direct links and from different referrers, and then they visit more pages through related post contents. Related Post are very useful for page SEO (Search Engine Optimization), page ranking and also for visitors.

You will find different type of codes to show related posts, but I will use WordPress tax_query to display related posts for both Tags and Categories.

Display Related Posts using Post Tags

Related Posts are usually shown using post tags. For this, you have to add at least one tag in every post.

First Step: Login to your admin area and create a New Post or Edit a Post. When you will go post editor page, you will see a Tag section in the right sidebar, if not check the Tag section is activated from the Screen Options. Click to expand the Screen Options in the top right corner and check the Tags box. See the image below ─

WordPress Expanded Screen Options

Now copy the following codes and paste in single.php of your current theme directory. Paste where you want to show the related posts.

<?php
global $post;
$terms = wp_get_object_terms( $post->ID, 'post_tag', array('fields' => 'ids') );

$args = array(
    'post_type' => 'post',
    'post_status'=>'publish',
    'posts_per_page' => 4,
    'post__not_in' => array ($post->ID),

    // Tax query
    'tax_query' => array(
        array(
            'taxonomy' => 'post_tag',
            'field'    => 'term_id',
            'terms'    => $terms
        )
    )
);

$query = new WP_Query($args);
if( $query->have_posts() ) : ?>
    <div class="related-posts">
        <h2><?php esc_html_e( 'Related Posts:', 'themeslug' ); ?></h2>
        <ul>
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <li>
                <div class="thumbnail">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_post_thumbnail(); ?>
                    </a>
                </div>
                <h3>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </h3>
            </li>
        <?php endwhile; ?>
        </ul>
    </div>
<?php endif;
wp_reset_query();
?>

Changes:
If you use custom taxonomy, custom post type, you will need the following changes.

  • post_tag: If you use custom taxonomy, replace post_tag with that tag_slug.
  • post_type: If you use this in another post type then replace 'post_type' => 'post' with 'post_type' => 'post_type_slug'.
  • posts_per_page: How many posts to display, change the number only.

Display Related Posts using Category

To display related posts using Category, code will be the same as above, only replace post_tag to category. The post_tag is used 2 times in the codes, just replace them.

Styling Related Posts using CSS

Paste the following CSS in style.css (stylesheet) file.

.related-posts h2 {
    font-size: 18px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 10px;
    line-height: 1.5;
    color: #222
}
.related-posts img {
    height: auto;
    max-width: 100%;
}
.related-posts ul {
    list-style: none;
    padding: 0;
    font-size: 0;
    margin: 0 -5px;
}
.related-posts ul li {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
    margin-bottom: 10px;
}
@media screen and (min-width: 480px) {
    .related-posts ul li {width: 25%;}
}
.related-posts ul li h3 {
    font-size: 14px;
    padding: 0;
    margin: 5px 0 0;
    line-height: 1.4;
}
.related-posts ul li a {
    color: #222;
    line-height: normal;
    display: block;
    text-decoration: none
}
.related-posts ul li a:hover, .related-posts ul li a:focus {
    text-decoration: underline;
}

Example:

An Example of Display Related Posts using Tags or Category in WordPress

Display Related Posts with Plugins

There are some plugins to display related posts and they have some features like ─ user can control, user can use widgets, short-codes and more. I will just provide the name of the Plugins here. Before using a plugin, remember one thing, don’t use a plugin that has not been updated for a long time and not compatible for WordPress current version. And read the plugin’s description and features. The plugins are ─

  1. Yet Another Related Posts Plugin (YARPP)
  2. WordPress Related Posts
  3. Contextual Related Posts
  4. Related Posts
  5. Related Posts for WordPress