How To Add Related Posts Without Plugins in WordPress

Getting Started: Related Posts With Thumbnails: This "related posts" feature, like most others, is designed to be placed on your main article page (single.php), but you can use it almost anywhere, as long as you keep it within the WordPress loop. In order to get the related posts, we’ll be using the post tags that are given to individual articles. Thumbnails WordPress now features a built-in thumbnail system, which we’ll need here. In order to enable it, add this code to your functions.php file in your theme folder (in most cases, it’s already there).

add_theme_support( 'post-thumbnails' ); 

You can also set the width and height of the thumbnails by adding another line to the code:

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

Important: When adding images to posts, in order to create a thumbnail, you have to, in the image upload panel, select “Use as featured image”. This will create the thumbnail for the post.

  The Code: 

Related posts
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();  
    ?>  
  
    



  
          
          
    

The piece of code  the_post_thumbnail(array(150,100) sets the size of the thumbnail which will be displayed, in this case, 150px width, 100px height. The CSS We have two divs classes here, “.relatedposts”, which is the overall div container, and “.relatedthumb” which is the individual thumbnail and link within the .relatedposts. We’ll assume that the width of the post is the standard 640px.

 The 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;}  

The CSS above will render the post thumbnails with 150px in width, which means we’ll need 4 thumbnails to fill the 640px width of the post (including the margin between them). You can adjust this as you wish; if you want 5 thumbnails, you’ll need a .relatedthumb width of approximately 125px.

Important: Be sure to set the width of the thumbnails generated in your WordPress media settings to match the ones you set in CSS. Additionally, it has to match the size specified in the php code:  the_post_thumbnail(array(150,100) .

Example: The related posts should appear something like this, as used by gaming blog DigitalBattle (which uses the exact technique described in this article):