Increase JetPacks Amount of Related Posts in WordPress

By default the related posts module from JetPack shows 3 related posts at the end of a regular single post in WordPress. You can use a JetPack filter to increase the amount of JetPack related posts with  – jetpack_relatedposts_filter_options.

You would use it like so…

<?php //<~ don't add me in, but add the rest to functions.php
function jetpackme_more_related_posts( $options ) {
$options['size'] = 6; //change the number for the amount required
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );
view raw jetpack-posts.php hosted with ❤ by GitHub

Just change the number to how many related posts you want to appear.

There are a number of convenient JetPack filters available, another one is to change the related posts main headline from “Related” to someting else with jetpack_relatedposts_filter_headline

<?php //<~ don't add me in, but add the rest to functions.php
//Change Related Post HEadline
function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf(
'<h3 class="jp-relatedposts-headline"><strong>%s</strong></h3>',
esc_html( 'Similar Stuff Going On' )//change your headline here
);
return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );

Both of these snippets are to be added to your themes functions.php file.

JetPacks CSS Layout

One of the issues you will run into when changing the amount of related posts is how JetPack controls the layout with CSS selector pseudo nth types – you will have to disable JetPacks CSS or write your own to override JetPacks – for instance to have a 6up layout that reduces without gaps when the viewport is smaller you will need to add in your CSS..

/* You may need to add the !important declaration if your JetPacks CSS loads last - this works for a 6 up layout */
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+1), div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+1) {
clear: left;
}
@media only screen and (max-width: 640px) {
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+1), div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+1) {
clear: none;
}
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
clear: none;
}
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+1) {
clear: left;
}
}

How your CSS files load will determine if you need to add the !important variable or not.

4 Comments

  1. Kris Fannin on April 24, 2016 at 4:13 pm

    Very thankful for this as everything else I found was wanting to change Jetpack files – wanted something that would stick through updates. Thank you again for this!

  2. Potato on March 31, 2016 at 6:19 am

    Thanks for the snippet Neil, not sure why this isn’t in Jetpack by default yet.

  3. Joseph on January 4, 2016 at 3:47 am

    Great tip. On some mobile devices, the related posts appear like this: http://prntscr.com/9lu53l missing on slot. How can we make it fill up/responsive?

    Regards,

    • Neil Gowran on January 5, 2016 at 12:30 am

      Thanks for pointing that out – you have to adjust some CSS to override JetPacks styling – I have updated the post and added some CSS to make the 6up layout work.

Leave a Comment





%d bloggers like this: