WordPress Related Posts Without Plugin

How to add or show related posts under your blog post without installing additional plugin.

I have posted how to add breadcrumbs without plugin and my best breadcrumbs plugin if you want a plugin, a few days ago, and today, i want to show you, how we can actually display related posts, which is usually you can find under your blog post.

This tutorial uses a shortcode that will display related posts based on “tags”, using TwentyTen theme. Of course you can apply it in your own theme, as long as it has functions.php.

Example, Post A has “funny” as a tag, and the other post, Post B has the same “funny” as a tag.

When you click Post A, it will show after the post content, something like:

Related Posts:
1. Post B.

Related Posts section often helps to get better interlinking in your blog page, and can decrease bounce rate.

When your visitors read your post, they won’t soon go away, or close their browsers if they see many post titles options that may interest them to read.

Now if you want to use plugin for this, this Y.A.R.P.P (Yet Another Related Posts Plugin) used to be my best related post plugin.

So let’s create this related post under post without plugin (for demo, see my related post under this post):

Video:

Step by step guide:

1. Dashboard → appearance → editor

2. Function theme which is functions.php file (always back up first)

3. Add this code. (download in .txt file)

Thanks to blue anvil.

4. Update File.
Now we want to call this function by displaying (echo) the shortcode after post content.

It means we must adding some codes in single.php.

5. Click single post file which is single.php, open it, and look for a line of code which said: (see image)

</div><!--#nav-below-->

Where to paste the code.

5. Right below this line, add this line:

<div id="relatedpost">
<h3>Related Posts:</h3>
<?php echo do_shortcode('[related_posts]');?>
</div><!--#relatedpost-->

6. Update file, and check your post. It should have related posts based on the same tags.

7. To stylize the css, you can modify anything you like, in this tutorial i use a simple one.

Add this line to your style.css and update the file.

#relatedpost h3{margin:25px 0 10px 0;}

That’s it, modify, stylize as you like to fit your theme color, etc.