Customizing Jetpack’s Related Posts

Jetpack is one WordPress plugin that I install on most projects. It is packed full of great features.

One of the best things about Jetpack is the Related Posts feature. Jetpack’s Related Posts, unlike other related post plugins, doesn’t eat up a lot of server resources. With Jetpack Related Posts you’ll encourage site visitors to stick around longer on your blog reading more of your awesome content.

The Related Posts feature scans all of your posts, analyzes them, and lets you show contextual posts your visitors might be interested in reading after they’re done with whatever post they’re on. (source: jetpack.me)

Once you’ve activated this feature you can select (in Settings → Reading) to “Use a large and visually striking layout” to display featured images with the post titles.

Jetpack cropped my Related Post images

But here’s the problem — the Related Posts images don’t use your blog’s thumbnail dimensions. The images are cropped to 350px wide by 200px tall. If my blog used horizontal images that would work but my tall Pinterest-style images were being cropped.

Here are the edits I have made to my theme to customize Jetpack Related Posts so the Related Posts look a lot better. My entire featured image is shown with my custom dimensions.

Customize Jetpack’s Related Posts with this code

Change Jetpack’s Related Posts Headline

Add this code to your child theme’s functions.php file.  You can customize your headline by changing the text “You might also like…” in the code.

//Jetpack Related Posts - changing related text and class
function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf(
'<h3 class="jp-widget-title">%s</h3>',
esc_html( 'You might also like...' )
);
return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );

Choose how many Related Posts you display

Change the number 4 below to suit your design and paste this into your functions.php file. The default display is 3 so if, like me, you want to show three posts, you don’t need to add this function in your .php file.

// show 4 related posts
function jetpackme_more_related_posts( $options ) {
 $options['size'] = 4;
 return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

How to Change Jetpack’s Related Post Thumbnail Dimensions

Adjust the dimensions below to suit your website. These dimensions worked for my site to display vertical Pinterest-like thumbnails.

// change thumbnail size
function jetpackchange_image_size ( $thumbnail_size ) {
 $thumbnail_size['width'] = 226;
 $thumbnail_size['height'] = 339;
// $thumbnail_size['crop'] = true;
 return $thumbnail_size;
}
add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

Remove Categories and Tags from below each Related Post

By default, Related Posts include some context, as a quick explanation of why that post was chosen as a Related Post: it can be because it belongs to the same category, or because it shares the same tag. You can remove that additional information with this filter:

// remove category and tag context text
add_filter( 'jetpack_relatedposts_filter_post_context', '__return_empty_string' );

I’m still working through all of my old posts to create new Pinterest-friendly images. When I’ve edited all my post images, the Related Posts feature that displays below each post, will look much better than it would have with the Jetpack default settings.

If you found this helpful, why not share it?

[clickToTweet tweet=”Add this code to your #WordPress theme to customize JetPack’s Related Posts pic.twitter.com/aAnC1sXcr5″ quote=”Add this code to your #WordPress theme to customize JetPack’s Related Posts”]