How to use Thumbnails with Previous and Next Post Links in WordPress

One of our users asked us on our Facebook page: How to use thumbnails for previous/next post navigation in WordPress. The next_post_link and previous_post_link functions doesn’t have a simple enough thumbnail parameter which a new developer can simply turn on and off. In this article, we will show you how to use post thumbnails with previous and next post links in WordPress.

The final result would look like this:

First thing you need to do is open your theme’s single.php file and add the following code inside the loop most likely after the_content() area:

  <div id="cooler-nav" class="navigation">  <?php $prevPost = get_previous_post(true);  if($prevPost) {?>  <div class="nav-box previous">  <?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>  <?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>  </div>    <?php } $nextPost = get_next_post(true);  if($nextPost) { ?>  <div class="nav-box next" style="float:right;">  <?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>  <?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>  </div>  <?php } ?>  </div><!--#cooler-nav div -->  

Next thing you need to do is open your style.css file and add the following styles:

  #cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}  #cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}  #cooler-nav img{float: left; margin: 0 10px 0 0;}  #cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}  #cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}  #cooler-nav .next{float: right; width: 250px;}  

Feel free to change the styling to match it with your theme. Often our users like to style the code, so it makes it easier for them to tweak it. This is just basic styling which you should be able to customize easily.

If you want to change the thumbnail size, then simply change the array(100,100) to whatever you like.

Source: itsbarry