A customizable shortcode for related posts

A customizable related posts WordPress shortcode

In this post, you’ll read how to install, use and customize the WordPress shortcode that displays related posts as a simple bulleted list.

This code will let you:

  • insert related posts only when you want it – some bloggers don’t want related posts displayed under every single post. As this is a shortcode, it will give you a freedom to decide where you want the related items to be displayed – under which post, and in which exact place of that post,
  • list posts by tag – no advanced algorithm is involved here – the shortcode will display posts by manually defined tag, ecluding the current post,
  • decide on the number of displayed posts – the default number is set to 5, but you can show any number of posts, depending on the current need,
  • related posts are displayed in a feed – as the shortcode inserts the list into the content of the blog, it is also being displayed in a feed,
  • you can narrow the list of used tags – in the setttings you can exclude posts with certain tags

How to set up

Note: Please remember to make any changes in a test theme.

Paste the code from below at the end of shortcodes.php (preferred way) or functions.php. Here is how to set up shortcodes.php. It’s a 15-minute set-up, but you’ll have a separate file that all shortcodes will be stored.

    'tag' => 'default-tag',
    'id' => get_the_ID(),
       ), $atts));
       $return_string .= '
    '; $the_query = new WP_Query(array('tag' => $tag, 'orderby' => 'date', 'order' => 'DESC' , 'showposts' => $number , 'post__not_in' => array( $id ), 'tag__not_in' => array(00001, 00002, 00003) )); if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $return_string .= '
  • '.get_the_title().'
  • '; } } else { } wp_reset_postdata(); $return_string .= '
'; return $return_string; } add_shortcode( 'my-related-posts', 'MyRelatedPostsShortcode' ); ?>

How to use

To display related posts in a post, just place the shortcode like this:

[my-related-posts number=3 tag=”wordpress” ]

This code will:

  • display posts that has a tag with a slug “wordpress”,
  • display 3 posts – you can change it to any number). If you don’t insert the number declaration, 5 posts will be displayed by default, as set on line 3 of the code,
  • won’t display anything – if you use the tag slug that doesn’t exist.

If you want to display 7 posts that have both “wordpress” and “shortcodes” tags, then use two slugs with a plus:

[my-related-posts number=7 tag=”wordpress+shortcodes” ]

How to customize

You can modify the shortcode function in a number of ways:

  • change the default number of displayed posts – go to line 3 and replace 5 with any number,
  • set a default – on line 4 write down a valid slug of the tag to displayed if no tag declaration is used in a shortcode; for instance, if most valuable posts on your blog are tagged with “tips-tricks” then use this to replace “default-tag”,
  • define tags not to be included – there might be tags you don’t want to be taken into consideration. Let’s say you want to show posts with a tag “wordpress” but not “varia”. On line 8 of the code scroll right to reveal tag__not_in. In the array write down IDs of tags to exclude. From now on, even if the post is tagged “wordpress”, it won’t be displayed, because it also has a tag “varia”,
  • change the identifier – generally, the shorter the better. You can change the identifier of a shortcode from my-related-posts to something else. Please keep in mind that it should be very specific, and not used by any other function.
  • add a special styling – add a class inside ul tag on line 7. If you call the class “related-posts”, then style it in the style.css. Example follows below:
.related-posts {
    border:1px solid #dedede;
    background: #efefef;

And you’ll see related posts like this:

Other WordPress tips (handled by a shortcode described above):

[pi-archive number=5 tag=”wordpress” ]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: