Show Related Posts with Thumbnails without Plugin in WordPress

Related posts affect your blog bounce rate and page views also, and I already published more than 3 articles on related posts code. But in this I will tell you code for show-related posts with featured image or post thumbnails. Many plugins available for show-related posts on blog I also try many but not satisfied with them, so I collect some code from net and create one simple code for show-related posts with post thumbnails based on tag. I am using same code on my blog for show-related posts on my blog, and I hope you will also like it.

You need to insert code in your single.php file for show-related posts after posts code.

In this code, you can see “add_image_size( ‘related-posts’, 90, 90, true );” You can use it for set your thumbnail image size, I recommend don’t change because it is working fine. Another one is “’posts_per_page’=>5” and you can edit this line for the show number of related posts. You can set it 4 if your content-area width is less than normal themes.

<!——Related posts code start here——->
<?php
add_image_size( ‘related-posts’, 90, 90, true );

$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’=>5, // Number of related posts that will be shown.
‘caller_get_posts’=>1,
‘orderby’=>’rand’ // Randomize the posts
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo ‘<div id=”related_posts”><h3>Related Posts</h3><ul>’;
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li>
<a href=”<?php the_permalink()?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_post_thumbnail( ‘related-posts’ ); ?>
</a>
<div>
<a href=”<? the_permalink()?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a>
</div>
</li>
<? }
echo ‘</ul></div>’;
} }
?>
<?php wp_reset_query(); ?>
<p/><br/>
<!——Related posts code end here——->

Now time for related posts customization so that you get better look.

Open you style.css file for enter CSS codes for related posts. You can also edit CSS code for change look of your related posts. Before insert this code in style.css file make sure there no other code with #related_posts class otherwise related posts not show well.

#related_posts {
margin-top:-15px;
}
#related_posts ul {
overflow:hidden;
margin:0;
margin-left:-43px;
}
#related_posts li {
list-style:none;
float:left;
margin:0 22px 0 0;
}
#related_posts li a {
display:block; font-size:11px;
font-family:tahoma, Arial, sans-serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
text-align:center;
width:100px;
line-height:16px;
border-bottom:none;
overflow:hidden; }
#related_posts li img {
padding:5px;
background-color:#f4f4f4;
border:1px solid #ddd; }
#related_posts li img:hover {
background-color:#ddd;
}
#related_posts h3 {
border-top:1px dashed #AAAAAA;
color:#135A9F;
padding-top:10px;
font-family:’Patrick Hand’,Arial,sans-serif; font-size:1.35em;
}

Check arrow mark on image I am using here ‘Patrick Hand’ font in css for show Related Posts title in handwriting style. I am using Google webfont API for use this font on my blog you can also use this font just open your header.php file from theme folder and enter this code before closing head tag(</head>).

<link href=’http://fonts.googleapis.com/css?family=Patrick+Hand&v2′ rel=’stylesheet’ type=’text/css’>

I hope you will enjoy this code please comment below if you like it or feel any problem during code implement.