Skip to content

How to Show Jetpack Related Posts in the Sidebar

By default, Jetpack Related Posts is added to the end of post articles. Nevertheless, it is possible to insert it to different locations by implementing some code customizations.

Until recently, this was the only location that was officially supported by the JetPack plugin. With the addition of the Related Posts block, however, users can now also insert the related posts to any supported location within a post or page.

Likewise, if you’re using the new block-based widgets screen, this block can be used to add the related posts to the sidebar. It’s also possible to add it to the sidebar if you’re still using the classic widget screen. Here’s how to go about it for both.

Add JetPack Related Posts to Sidebar (Block-based Widget Screen)

1. Start by removing the JetPack Related Posts from the bottom of the pages by adding the following code snippet to your functions.php:

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_action( 'wp', 'jetpackme_remove_rp', 20 );

Otherwise, skip this step if you want to have both locations visible.

2. Next, go to the widgets page and add the Related Posts block to the sidebar. On the block, you can toggle between the grid and list layouts. Ideally, you’ll want to display the block as a list since most sidebars are too narrow to accommodate the grid display.

Screenshot of the Jetpack related posts block in the widget sidebar.
Select the list layout

3. By default, the block adds three post items with dates shown. You can however customize the number of post items to show along with whether to display dates and the context (category or tags) by selecting the block and adjusting the corresponding options in the sidebar.

Screenshot of JetPack Related Posts block options.
JetPack Related Posts block options

4. The block doesn’t include a widget title. You can however display one by adding a Heading block above it and giving it the appropriate title, e.g. Related Posts.

Screenshot of a Jetpack Related Posts in a sidebar
Jetpack Related Posts in my site’s Sidebar

5. Once you’re done, click the Update button at the top of the page to save the widget.

Add JetPack Related Posts to Sidebar (Classic Widget Screen)

1. Remove the existing related posts from the bottom of the posts by adding the code snippet below to your functions.php file. Otherwise, skip this step if you want to keep both locations visible.

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_action( 'wp', 'jetpackme_remove_rp', 20 );

2. Go to the classic widget screen and add a Block widget to the sidebar.

3. Expand the block widget and add the following code to it:

<!-- wp:jetpack/related-posts {"postLayout":"list"} /-->

The above code will display three related post items with dates in a list layout. You can however hide the dates by adding the displayDate option and set it to false:

<!-- wp:jetpack/related-posts {"postLayout":"list","displayDate":false} /-->

You can customize the number of items to show by using the postsToShow option. For instance, the code below will show 6 posts instead of the default 3.

<!-- wp:jetpack/related-posts {"postLayout":"list",postsToShow":6} /-->

You can also enable to show thumbnails and context (category / tag) by using the options displayThumbnails and displayContext respectively:

<!-- wp:jetpack/related-posts {"postLayout":"list","displayThumbnails":true,"displayContext":true,"postsToShow":6,"displayDate":false} /-->
Screenshot of a Related Posts with thumbnails and category in a sidebar.
Related Posts with thumbnails and category context

4. The above block doesn’t include a widget title. You can however display one by adding another block just above it and adding the following code:

<!-- wp:heading -->
<h2>Related Posts</h2>
<!-- /wp:heading -->

The above code will display the title Related Posts inside a H2 tag. Customize it to your liking.

That’s it!

Share:

Leave a Reply

Feel free to share your comments or questions with me. I may not be able to respond immediately so please check later once I've approved your comment.

Your email address will not be published.

Kelvin Kathia

Kelvin Kathia is a writer based in Kenya that's passionate about sharing solutions to everyday tech problems. He's the founder and editor of Journey Bytes, a tech blog and web design agency. Feel free to leave him comments or questions regarding this post, or by leaving him a message on the contact page. If you found his content helpful, a donation is much appreciated.