How To Add Next And Previous Post Links With Thumbnail

If you want to use next and previous post links with thumbnail on your blog post without a plugin you can follow the below procedures.

So, let’s get started!

Step 1: Open your themes single.php file.

Step 2: Copy the below code and paste it where you want the next/previous post links with thumbnail to appear. It will configure your theme to implement this functionality.

Heads Up! You need to understand where the WordPress loop starts and ends for specific tags in order to place the code perfectly. Make sure you place this code correctly.

<div id="post-nav" class="navigation">
    <?php $prevPost = get_previous_post(true);
    if($prevPost) ?>
        <div class="nav-box previous">
            <?php previous_post_link('&laquo; &laquo; Previous Post:', 'yes'); ?>
            <?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 previous_post_link('&raquo; &raquo; Next Post:', 'yes'); ?>
            <?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
            <?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
        </div>
    <?php ?>
</div><!--#post-nav div -->

Step 3: After the placement of the code, now save the file.

Step 4: Now, open your style.css file and add the following code. You can change and customize this styling code to get the styles you want.

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

Functions the code uses:

next_post_link
previous_post_link
get_next_post
get_previous_post
Get_the_post_thumbnail

That’s all.

Thanks & enjoy happy coding.

Leave a Reply

Your email address will not be published. Required fields are marked *