How to Show Related Post/Item in WordPress without Plugin

Show category wise related item/post without using any type of Plugins, Just paste simple code in your theme, Then SAVE and take advantage.

Code

<?php
$catArgs = array(
'category__in' => wp_get_post_categories($post->ID),
'showposts' => 3,//display number of posts
'orderby' =>'rand',//display random posts
'post__not_in' => array($post->ID)
);
$cat_post_query = new WP_Query($catArgs);
if( $cat_post_query->have_posts() ) {
echo '<div id="related_posts" class="clear" ><h3>You May Also Like</h3><ul>';
while ($cat_post_query->have_posts()) : $cat_post_query->the_post(); ?>
<div class="related_itemspl">
<div class="related_thumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_post_thumbnail( 'small-thumbnail'); ?> <?php the_title(); ?></a>
</div>
</div>
<?php endwhile;
echo '</ul></div>';
wp_reset_query(); } ?>

How to Do

Guys! i have share with you this code. I found this code on wphats.com‘s website. So follow simple steps then show related items –

  1. Open your active theme folder.
  2. Open single.php or open where you want to show related item.
  3. Paste code Then SAVE now.

Hope this code work perfectly. Have another type of tool so go there.

CSS Code

I am share CSS code of my website, If you do not like so change this CSS code according to your choice.

#related_posts ul {
width: 100%;
margin-top: 1.4em;
margin-bottom: 1.8em;
overflow: hidden
}

.related_itemspl:first-child {
margin-left: 0
}

.related_itemspl {
height: auto;
background: #e9e9e9;
width: 32.3%;
overflow: hidden;
margin-left: 1.5%;
padding: 1%;
float: left
}

#related_posts img,
.related_thumb {
width: 100%;
clear: both;
overflow: hidden
}

.related_thumb {
height: auto;
text-align: center
}

.postdbreadcrumb,
.postview {
text-align: left;
height: auto;
overflow: hidden
}

.related_thumb a {
clear: both;
line-height: 22px;
text-decoration: none;
color: #000;
display: block
}

#related_posts img {
border-radius: 4px;
height: 120px;
margin-left: auto;
margin-right: auto
}

.clear {
height: auto;
font-weight: 400
}

.clear ul {
margin: 0;
padding: 0
}

FAQ

Can i use this code on Blogger’s website?
No, this code not for blogger, If you want to show related item in blogger so Click Here and find code.
Blog