Related posts are a sure way to present your blog articles to the reader of a specific taste who is reading one post only. Now it depends upon you that where you actually want to show the related posts, one good practise is to show the related post at the end of a specific post since it will give the reader opportunity to navigate to the other articles of the website with quite an ease once he ends up reading that article. Related posts can be controlled with the tags also but this time I am going to show that how can you show up related posts with the help of categories.

Related Posts in WordPress VIA categories:

Suppose reader is going to read a post under the category of the Android and then he wants to read more posts also from the same category then here related posts role come into play. If you add related posts at the end of that specific post then he will be able to navigate to the other posts of the site under the category Android.

Adding Related Posts in WordPress – The Code Part:

The code is divided into the two parts, one is the style for the related posts and the other is the php code for calling the related posts. First I’ll show you how to add the php code to the post page of your blog and later the I’ll tell you how to add the style code to style the related posts, the style is damn unique as I know the line between creativity and over designing :P.

See Also: Popular WordPress Posts Using Visits Counter without Plugin

Locating the Post/Article Template in your Blog:

First you need to locate the article template of your blog, since we need to add the related posts under the post page of your blog. Just after the user has completed reading the post. Follow the steps below:

Login to your wordpress and go to Appearance>Editor. There you need to locate single.php. Click single.php and then add the following code below “<?php the_content(); ?>”

Adding Related posts PHP Code in single.php:

Open up the single.php and then add the below code at the end of your post content i-e after the <?php the_content(); ?>. Don’t forget to update the file after adding the below code i-e press “Update File”

<!-- related posts through categories talkofweb -->
    <?php $orig_post = $post;
    global $post;
    $categories = get_the_category($post->ID);
    if ($categories) {
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

    $args=array(
    'category__in' => $category_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 4, // Number of related posts that will be shown.
    'caller_get_posts'=>1
    );

    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
    echo '<div id="related-posts" class="talkofweb"><h2>You Seem to Like these too ;)</h2><ul>';
    while( $my_query->have_posts() ) {
    $my_query->the_post();?>
<div class="related">
    <li><div class="relatedthumb talkofweb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
    <div class="relatedcontent">
    <p><?php the_time('M j, Y') ?></p>
       <div class="clear"></div>
    <h1><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    </div>
    </li></div>
    <?php
    }
    echo '</ul></div><br><a style="font-size: 10px;float: right;" href="https://www.talkofweb.com" title="Grab Related Posts for your Blog">Get This Widget Of Related Posts</a>';
    }
    }
    $post = $orig_post;
    wp_reset_query(); ?>
    <div class="clear"></div>
    <!-- related posts through categories talk of web -->

Adding the Style Code for Related Posts in Style.css:

Now, you need to add the related post style code (CSS Code) to the style.css of your wordpress theme. Now again you need to open up the editor in the appearance tab of your wordpress blog and then go to style.css (By Default the editor opens up style.css) Copy the below code and then paste it into the style.css, you can paste it anywhere but if you are a noob or a new person then you need to copy it and add it at the end of the style.css

#related-posts {
	margin: 10px 0;
}
.related {
	overflow: hidden;
	float: left;
	width: 160px;
	padding: 5px;
}
.related h1 {
	font-size: 16px;
	font-weight: bold;
	font-family: verdana;
	display: block;
}
#related-posts h2 {
	font-size: 18px;
	font-weight: bold;
	font-family: verdana;
}
#related-posts p {
	font-family: verdana;
	float: left;
	background: #ccc;
	font-color: #fff;
	padding: 5px;
	font-size: 11px;
	display: block;
	margin: 5px 0;
}
.relatedthumb img {
	overflow: hidden;
	display: block;
	text-align: center;
	border: 3px dotted rgb(119, 119, 119);
	margin: 5px 0;
	background: #ccc;
	border-radius: 4px;
	padding: 3px;
	width: 136px;
	height: 132px;
}
.clear {
	clear: both;
}

After pasting then update the code by saving the file through the button provided below “Update File“. Now go to the article page and then scroll to the end of the page, there you will be able to see the related posts. if you have any questions then you can ask below through the comments.