How to Customize Jetpack’s Related Posts

The related posts are great ways to create cross-links between our various contents and to show other interesting articles to our users.

Recommending similar posts is good from an SEO perspective too, we create more cross-link, and refer to older contents.

But how we choose which articles are related? For this, we can use taxonomies like categories and tags. In some case these are sufficient, but typically, we want better recommendations.

Using WordPress, we have a lot of choices, but I mostly go with Jetpack’s solution. Jetpack is a not one plugin, but an extension collection where we can individually switch on and off each component based on our needs. I use it for brute force protection, statistics, social sharing, and so on. It is an Automattic plugin; it makes the computations in the cloud, which is good news for our server.

Basic Customization

Jetpack’s similar posts solution is easy to use we have to turn it on (after we installed the plugin) under Jetpack -> Settings -> Traffic menu; here we have some customizing options too.

If we navigate to Appearance -> Customize and open a single page (where the plugin displays the results), we can set more options by opening the “Related Posts” menu item. We can hide individual building blocks, set different layout, hide or modify the title.

These are the most basic settings which are indeed for the end users. If you want more, you can visit the official customize documentation. Here you will see that we can easily modify the template, exclude posts, and increased with some simple hooks.

Customize Jetpack’s Related Posts Completely

If we want full creative control over the display, we can do that too. In this case, we only get the related posts IDs from a function, and we can do whatever we want with it.

We call the Jetpack_RelatedPosts’s init_raw() functions and pass the needed parameters to query. Two essential settings are the current post ID and the limit.

<?php 

$related = Jetpack_RelatedPosts::init_raw()
    ->get_for_post_id(
        get_the_ID(),
        array( 'size' => 3 )
    );

if ( $related ) {
    foreach ( $related as $result ) {
        $posts_id[] = $result[ 'id' ];
    }

    $the_query = new WP_Query( array(
        'post_type' => 'post',
        'post__in' => $posts_id
    ) );

    if( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) { $the_query->the_post();
            get_template_part( 'template-parts/similar-post' );
        }
    }

    wp_reset_query();
}

In this example (which you can also see here at Pine in the sidebar), after we get the post IDs, we collect them and use a WP_Query to make a regular query. We can place this anywhere and in the loop, we can do whatever we want with the layout or styling as we do in our theme.

Please note if you use a custom solution you may need to remove the default style and script loaded by the extension.

Special thanks for the following recource(s): Icon made by Flat Icons from www.flaticon.com
Need a web developer? Maybe we can help, get in touch!