Learn how to customize Jetpack’s Related Post widget in your WordPress blog by change the title, number of related posts appearing under each blog posts.
Jetpack by WordPress.com is one of the most installed WordPress plugin. More than 1 Million WordPress users are using Jetpack to power their blog. Recently I switched to Genesis Framework for WordPress blog and blog post looks cool with Jetpack’s Related Post widget.
Read:
All Genesis themes are Professionally designed to cope up with latest internet web technologies. They are carefully carved to meet site flexibility without compromising the Search Engine Rankings.
Genesis Child themes cater all types of blogger niche like Personal, Photography, Technology, Business, Health, Commerce, Creative Portfolio, News, Fashion, Lifestyle, Restaurants, Foods..., etc.
Jetpack is open-source plugin packed with lots of features like Related Posts, Publicize, Enhanced Distribution, Social Sharing, manage plugins and menus, publish posts, centralised management, Contact Forms, Galleries and Carousels, Notifications and Subscriptions, Configurable Widgets and WordPress Security features to avoid unauthorised entry and brute force attacks.
Checkout: 12 Cool Features of Jetpack WordPress Plugin
Jetpack’s Related Posts is one of the most popular plugins for displayed related posts widget. Unlike other related posts plugins, the related posts module in Jetpack is not resource intensive as it makes use of the powerful WordPress.com’s servers to compute and render the related posts.
Tough this is widely used by millions of bloggers across the Globe it’s not that much user-friendly settings to modify.
So, in this article I will cover the following tips to easily tweak Jetpack related posts widget with some simple code snippets.
- Changing Jetpack’s Related Post Title
- Changing Number of Displayed Related Posts
- Changing Related Posts Thumbnail Dimension
- How to Remove Categories & Tags from Jetpack’s Related Post
- Modifying Default Fallback Image
Note: Before you start modifying functions.php please make a backup of that file using FTP. Incase if something goes wrong navigate to Theme’s functions.php file using FTP and replace it with backup file.
I am using Jetpack’s “Related Post” feature to display related contents under each blog post and am satisfied with it. Earlier I was using “Better Related Post“ WordPress plugin and I personally feel Jetpack loads faster than that.
1. How to Change Related Post Title?
By default Jetpack doesn’t show any Title for Related post widget. So, we need to manually add this title using the following codes to your child theme’s functions.php file. You can customize your headline by changing the text “You might also like…” or “What others are reading…” or “Related Posts” in the code.
1 2 3 4 5 6 7 8 9 | //* Jetpack Change Related Post Title - Geekyard.com function jetpackme_related_posts_headline( $headline ) { $headline = sprintf( '<h3 class="jp-widget-title">%s</h3>', esc_html( '<span style="color: #ff0000;">Recommended Posts for You:</span>' ) ); return $headline; } add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' ); |
2. How to Change Number of Displayed Related Posts?
Jetpack by default displays only 3 numbers of related posts. So, if you want to alter that to 6 numbers of related posts like mine, just add the following codes to functions.php.
1 2 3 4 5 6 | //* Jetpack show 6 Nos related posts - Geekyard.com function jetpackme_more_related_posts( $options ) { $options['size'] = 6; return $options; } add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' ); |
3. How to change Related Posts Thumbnail Dimension?
It’s easy to modify the Jetpack’s Related Post Thumbnail dimension by using the following codes. Add the following code to “functions.php” and alter the “Width” and “Height” dimensions accordingly to your blog appearance.
1 2 3 4 5 6 7 8 | //* Jetpack change thumbnail size - Geekyard.com function jetpackchange_image_size ( $thumbnail_size ) { $thumbnail_size['width'] = 250; $thumbnail_size['height'] = 150; // $thumbnail_size['crop'] = true; return $thumbnail_size; } add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' ); |
4. How to Remove Categories & Tags from Jetpack’s 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 in:
1 2 | //* Jetpack remove category and tag context text - Geekyard.com add_filter( 'jetpack_relatedposts_filter_post_context', '__return_empty_string' ); |
5. How to Add a Default Fallback Image?
If you are using featured images, then the related post will display the same in related post widget. If no featured image is added to the post then the plugin will look for the images in the target post content and picks the first one to use while displaying the related posts.
If suppose you haven’t added any image in the post and only texts contents are present, then you can use the code below to define a fallback image. Just copy the below code and paste it in the functions.php.
Note: Replace https://geekyard.com/image.jpg with the actual fallback image URL.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //* Change Default Fallback Image - Geekyard.com function jeherve_custom_image( $media, $post_id, $args ) { if ( $media ) { return $media; } else { $permalink = get_permalink( $post_id ); $url = apply_filters( 'jetpack_photon_url', 'https://geekyard.com/image.jpg' ); 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 ); |
Hope you have learnt some simple hacks to customize the Jetpack’s Related post appearance according to your taste. If you have much more ideas on modifying this widget kindly share the same in Comment section so other WordPress users will be benefited.
