Introduction

This article explains how to add related posts to each post in Wordpress depending on the tags given. Even though there are many plugins available to do that, here I will show you a demo of implementing it without a plugin. I hope you like it.

Please see this article in my blog.

Background

Today I was writing some articles on my website and when I finished my writing, I was just thinking about showing the related posts to each post depending on the tags selected. Hereby I will show you how to implement it.

Before going through it, we can do this in two ways.

  • With a plugin
  • Without a plugin

I will always recommend you to use normal PHP, the Wordpress implementation that does not require any plugin. Do you know why?

Limitations if we use plugins
  • It may change your theme style.
  • It may not support your framework version.
  • It may slow down your website.
  • If you include a plugin, you are giving credits to the plugin author.
  • Some plugins may have some internal redirects, it may cause unwanted loads.
  • Some plugins add ads without your knowledge.

These all problems will be resolved if you use normal few lines of PHP code.

If you still need to use a plugin, you can see some plugins here.

Using the code

Since we need the related posts entry to be seen in each and every post, we should make some changes in the file called single.php. You can either edit this file or create a widget.

Add a related posts in wordpress

Add a related posts in wordpress

Determine the end of each post, you can inspect one of your page elements in the UI and determine the class name and search it in the single.php file. For me it is the class post-excerpt.

Now after the class ends, you need to write the following code:

  1. <div class="relatedposts">
  2. <h3>Related posts</h3>
  3. <?php
  4. $orig_post = $post;
  5. global $post;
  6. $tags = wp_get_post_tags($post->ID);
  7. if ($tags) {
  8. $tag_ids = array();
  9. foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  10. $args=array(
  11. 'tag__in' => $tag_ids,
  12. 'post__not_in' => array($post->ID),
  13. 'posts_per_page'=>5, // Number of related posts to display.
  14. 'caller_get_posts'=>1
  15. );
  16. $my_query = new wp_query( $args );
  17. while( $my_query->have_posts() ) {
  18. $my_query->the_post();
  19. ?>
  20. <div class="relatedthumb">
  21. <a rel="external" href="
  22. <? the_permalink()?>">
  23. <?php the_post_thumbnail(array(150,100)); ?>
  24. <br />
  25. <?php the_title(); ?>
  26. </a>
  27. </div>
  28. <? }
  29. }
  30. $post = $orig_post;
  31. wp_reset_query();
  32. ?>
  33. </div>
You can set your posts count in the following lines of code.
  1. 'posts_per_page'=>5

Our next step is to add some CSS styles to the links.

  1. <style>
  2. .relatedthumb a {
  3. color: #7a7a7a;
  4. text-decoration: none;
  5. }
  6. .relatedthumb a:hover {
  7. color: #01a821;
  8. }
  9. </style>

You can either paste this CSS into a single.php file or in style.css.

Now update your file and run your website. Click on any post and see the output.

I have selected a post that is related to jQuery and got the related posts as follows. It works great!

Add a related posts in wordpress

Please note that you need to add tags in each post, then only this mechanism works.

Reference: Related Posts

Conclusion

That is all. I hope you liked this article. Please share your feedback with me.