SimpleBloggerTips: Adding WordPress Related Post With Thumbnails Without Plugins

There are many plugins available for showing WordPress related post with thumbnails. But using too many plugins can slow your WordPress process time.If you want to show WordPress related post with thumbnails without using plugins  here are the way. I am using category to show related post. Lets see how!
 


Follow These Steps:-

1. Add this bellow code in your single post page. You can easily find this code <?php the_content(); ?> in single.php file or content-single.php or content.php file. Add the following line after <?php the_content(); ?> code.

<div class=”related-post”>
<?php
$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),
‘showposts’=>3, // Number of related posts that will be shown.
‘caller_get_posts’=>1
);$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo ‘<h3>’.__(‘Related Posts’).’</h3><ul>’;
while( $my_query->have_posts() ) {
++$counter;
if($counter == 2) {
$postclass = ‘last’;
$counter = 0;
} else { $postclass = ”; }
$my_query->the_post();?><li>
<a rel=”nofollow” href=”<?php the_permalink()?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<span>
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(‘related’, ‘title=’); ?>
<?php else: ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/thumb.png” alt=”<?php the_title(); ?>”  width=’200′ height=’200′ />    //thumb.png is the default thumbnail image
<?php endif; ?>
</span>
<?php if (strlen($post->post_title) > 52) {
echo substr(the_title($before = ”, $after = ”, FALSE), 0, 52) . ‘…’; } else {
the_title();
} ?>
</a>
</li>
<?php
}
echo ‘</ul>’;
}
}
wp_reset_query();
?>
</div>

2. Add the following css code in your style.css file.

/*—————Related Posts —————–*/
.related-posts {
overflow:hidden;
padding:0 0 20px;
margin:0;
position:relative;
}
.related-posts #big-title {
margin-bottom:20px;
}
.related-posts a {
-moz-transition: color 0.3s linear 0s;
-webkit-transition: color 0.3s linear;
}
.related-posts li:hover a {
color:#0099CC;
}
.related-posts h3 {
margin-top:15px;
}
.related-posts li {
width:30%;
float:left;
margin-right:10px;
position:relative;
}
.related-posts li:nth-child(3) {
margin-right:0;
}
.related-posts li a {
color:#292929;
}
.related-posts li img {
/*border:1px solid #e1e1e1;*/
max-width:96%;
height:auto;
background:#f0f0f0;
padding:4px;
}
.related-posts .p_thumb {
width:100%;
height:auto;
}
.related_title {
font-size: 14px;
font-weight: 400;
line-height: 18px;
}

That’s all  for showing WordPress related post with thumbnails. Save and See if needed clear your browser cookie.
Now save it and your done! Enjoy Don't Forget to comment and share!