WordPress Related Posts With Thumbnails without Plugin

Related Posts with thumbnails in WordPress without a plugin:

WordPress has some dozens of plugins to display related posts with thumbnails,categories and tags.In this tutorial,we will teach you to add related posts with thumbnails in WordPress without using any plugins.Try to avoid many plugins ,which causes you blog speed slow down.

Steps to follow to add related posts with thumbnails in your wordpress blog :

Step 1 : Add thumbnail support along with image size in functions.php file

Step 2: Display in every single post (Single.php file)

Step 3 : Style it in style.css

Go to Appearances > Editor > Functions.php

Here's the code to add support for thumbnails along with custom image size to display

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 100, true );

Here 150 X 100 is a image size, which creates thumbnail automatically.If your theme don't fit this size, you can change image size as per your requirement by changing values.

Now to display related posts for every single post, add the following code to your theme's single.php file.

Go to Appearances > Editor > Single.php

<div class="relatedposts">
<h3>Related posts</h3>
<?php
	$orig_post = $post;
	global $post;
	$tags = wp_get_post_tags($post->ID);

	if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
	$args=array(
	'tag__in' => $tag_ids,
	'post__not_in' => array($post->ID),
	'posts_per_page'=>4, // Number of related posts to display.
	'caller_get_posts'=>1
	);

	$my_query = new wp_query( $args );

	while( $my_query->have_posts() ) {
	$my_query->the_post();
	?>

	<div class="relatedthumb">
		<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
		<?php the_title(); ?>
		</a>
	</div>

	<? }
	}
	$post = $orig_post;
	wp_reset_query();
	?>
</div>

Finally style it by pasting the following code in your style.css

Go to Appearances > Editor > Style.css

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

In this code you can change background color,border and other things, if needed.

WordPress Related Posts Plugins :

If you don't wanna use code, then go for WordPress plugins,which do same work.following are the best WordPress related posts plugins.related posts with thumbnails wordpress plugins.

1.Yet Another Related Post Plugin.
2. nrelate Related Content.
3.WordPress Related Posts.
4.Link with in and
5.Out brain.

Need Help :

We hope that, this WordPress tutorial helped you learning to add related posts with thumbnails in WordPress without any plugin.If you face any problem, let us know.