A customizable shortcode for related posts

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.

 5,
    '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:

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:

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 {
    padding:5%;
    border:1px solid #dedede;
    background: #efefef;
}

And you’ll see related posts like this:

• Font size of pre tag on mobile devices gets too big – a fix
• Adding new functions to WordPress – basic rule
• WordPress: use icon font sets instead of images

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

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