How to Display Related Posts On WordPress Sites

Website administrators and bloggers constantly look for ways to keep their readership active on their websites for longer and longer periods of time. One of the most common techniques they employ is to display related articles at the end of each article. This a very simple technique to keep your visitors on your website.

Displaying related articles/products/videos increases the time people spend on your website. This also why eCommerce companies like Amazon, and video hosting companies like YouTube and Netflix invest in complex machine learning algorithms to create effective recommendation systems.

While a newly started blog cannot afford such advanced techniques, displaying related posts at the end of each post is a simple trick to helps visitors stay longer on your blog or website. And the longer the visitor spends on your website, the more likely he or she is to make a purchase.

Let's not forget the UI aspect of it, recommendation systems are immensely helpful in helping people find the right content. I cannot recall the number of times I spent watching consecutive YouTube videos as served up by the recommendation system. Displaying related posts will decrease the navigational time and help connect the reader to the right content.

Using The Jetpack Related Posts Module

This related posts feature goes through all of your posts and analyzes them contextually to find the right related posts which may piqué the curiosity of your visitor.

I prefer using this module of Jetpack as opposed to running an extra plugin because the analysis and processing is performed from their cloud servers, which means your server resources aren't utilized for the same.

A few things about how this module actually operates:

• There needs to be a minimum of 3 good related posts that can be displayed. Without these three posts, nothing is displayed as related content at the end of a post.
• The related content is generated on the basis of tags, categories and the content of the posts themselves.
• Image thumbnails will either be the featured images of previous posts or from images attached to the related post to be displayed. They are cropped 350px wide by 200px high, son consider these dimensions when choosing featured images and make sure they will translate well to that size.

Additionally, if you'd like to make further modifications to the operation of the module, you'll have to modify some code in your functions.php file. Most of these functions involve modifying the Jetpack related posts filter.

• Change the number of related posts displayed. Change the option size count.

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' ); 

• Replace one of the Related Posts by a custom result, for a specific post. Post ID refers to the specific post in question.

function jetpackme_append_related_post( $hits, $post_id ) {
    // $post_id is the post we are currently getting related posts for
        if ( 2194 == $post_id ) {
            // Add 1036 to the front of the hits array
        array_unshift( $hits, array( 'id' => 1036 ) );
            // Remove the last element of the array
            array_pop( $hits );
        }
 
    return $hits;
}
add_filter( 'jetpack_relatedposts_filter_hits', 'jetpackme_append_related_post', 20, 2 );

• Exclude a specific post from ever appearing among Related Posts results. Again identify the post ID to exclude it.

function jetpackme_exclude_related_post( $exclude_post_ids, $post_id ) {
    // $post_id is the post we are currently getting related posts for
    $exclude_post_ids[] = 1037; // Exclude post_id 1037
    $exclude_post_ids[] = 1038; // Also exclude post_id 1038
    return $exclude_post_ids;
}
add_filter( 'jetpack_relatedposts_filter_exclude_post_ids', 'jetpackme_exclude_related_post', 20, 2 );

• Exclude an entire category from ever appearing among Related Posts results. Change the category.slug to a category that you do not want to see on your related posts.

function jetpackme_filter_exclude_category( $filters ) {
    $filters[] = array( 'not' =>
      array( 'term' => array( 'category.slug' => 'dogs' ) )
    );
    return $filters;
}
add_filter( 'jetpack_relatedposts_filter_filters', 'jetpackme_filter_exclude_category' );

• Selectively disable Related Posts from displaying on select posts. is_single array contains a number of post IDs for which related posts are not displayed.

function jetpackme_no_related_posts( $options ) {
    if ( is_single( array( 17, 19, 1, 11 ) ) ) {
        $options['enabled'] = false;
    }
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_no_related_posts' );

• Include pages in search results for related content.

function jetpackme_add_pages_to_related( $post_type, $post_id ) {
    if ( is_array( $post_type ) ) {
        $search_types = $post_type;
    } else {
        $search_types = array( $post_type );
    }
 
    // Add pages
    $search_types[] = 'page';
    return $search_types;
}
add_filter( 'jetpack_relatedposts_filter_post_type', 'jetpackme_add_pages_to_related', 10, 2 );

• Add a default fallback image, if no image can be found in a post.

function jeherve_custom_image( $media, $post_id, $args ) {
    if ( $media ) {
        return $media;
    } else {
        $permalink = get_permalink( $post_id );
        $url = apply_filters( 'jetpack_photon_url', 'YOUR_LOGO_IMG_URL' );
     
        return array( array(
            'type'  => 'image',
            'from'  => 'custom_fallback',
            'src'   => esc_url( $url ),
            'href'  => $permalink,
        ) );
    }
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );

• Hide the post date on the Related Posts.

 
.jp-relatedposts-post-date {
display: none;
}

You can read about more functions that you can add or modify with the related posts module using Jetpack on their blog.

Related Posts Plugins

If you'd rather use an independent plugin to perform the function of displaying related posts, there two free plugins that should be up to the task.

• Related Posts for WordPress – Does not slow down your website and uses its own cache to perform any heavy lifting. There is automatic creation of related posts and the plugin permits manual editing. The plugin has a premium version which provides multisite support and greater control over related posts template styling.
• Related Posts by Taxonomy – This plugin uses a cached query to find related posts. Add constraints to the related posts-matches by date and taxonomy/individual posts. Use your own HTML template which allows for more customization. The short codes help with displaying a specific number of related posts using widgets.

Increasing Site Stickiness

Displaying related posts definitely increases the time a visitor is likely to spend on your website. Harness its power and tell me how it went.