By
09/10/2016   Comments Off on Customizing WordPress Jetpack Related Posts

View all snippets

WordPress’ Jetpack Related Posts module is the best solution in displaying related posts because it doesn’t tax your server resources instead, all the work is done on WordPress.

Remove the related posts CSS:

My problem with JP related posts is how they display related posts and the fact that it includes an addition CSS file which means another http request thus slowing down the site slightly. I’d rather use my own styles and include them in my theme.

Here’s the codes I found to do this. Place these in your functions.php file:

 add_filter( 'jetpack_implode_frontend_css', '__return_false' );
 
 // Then, remove each CSS file, one at a time
 function yourprefix_remove_all_jp_css() {
 wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
 }
 add_action('wp_print_styles', 'yourprefix_remove_all_jp_css' );

source: css-tricks.com

Change the number of related posts to display:

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

Position the related posts elsewhere:

First, add this to your functions.php file:

// remove the related posts from default position:

function jetpackme_remove_rp() {
    if ( class_exists( 'Jetpack_RelatedPosts' ) ) {
        $jprp = Jetpack_RelatedPosts::init();
        $callback = array( $jprp, 'filter_add_target_to_dom' );
        remove_filter( 'the_content', $callback, 40 );
    }
} add_filter( 'wp', 'jetpackme_remove_rp', 20 );

Second, add this code where you want the posts to appear in your theme’s single.php file:

<?php if ( class_exists( 'Jetpack_RelatedPosts' ) ) { echo do_shortcode( '[jetpack-related-posts]' ); } ?>

Alter the heading for related posts.

I can change the text and the markup around it. I can place this in my functions.php file:

function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf('<h3 class="jp-relatedposts-headline"><em>%s</em></h3>', esc_html( 'My New Heading' ));
return $headline; } add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );

Change the thumbnail size for the related posts:

Just change the highlighted numbers below to the dimensions you want.

// 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 post tags and category info under each related post:

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

For more customization, visit the Jetpack’s Related Posts page.

Here’s some basic styling I use

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

body .jp-relatedposts h2 { margin-bottom: 1rem; font-size: 1rem; text-transform: uppercase;
 padding-top: 0.5rem; border-top: solid 3px #222; margin-top: 3rem;}

.jp-relatedposts-items { display:block; white-space:nowrap; 
width: calc(100% + 1.5em); margin-left: -0.75em; }

.jp-relatedposts-post { 
display:inline-block; width:33.33%; 
white-space:normal; vertical-align:top; padding: 0 0.75em; }

@media screen and (max-width: 600px) {
.jp-relatedposts-post { width:200px }
.jp-relatedposts-items { overflow-x:scroll; }
}