Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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:

Use Thumbnails with Previous and Next Post links in WordPress

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


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. patricia says:

    Hello! How would I do, if i want to use this for custom post type? thanks

  2. MarykeVanRensburg says:

    I got it to work. It seems the } in this “<?php } ?>” was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks

  3. bowetech says:

    HOw would i set it up so that it will actually get the next post from its current category ?

  4. Japh says:

    Nice and simple solution, I really like it. Great answer for your Facebook asker :)

  5. Wordpress Themes Labs says:

    nice guide

  6. MarykeVanRensburg says:

    Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.

    • wpbeginner says:

      @MarykeVanRensburg I think the TRUE variable there means in category browsing.

      • MarykeVanRensburg says:

        @wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:

        ‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),

        and I need to change it to show a thumbnail and only a certain category. Thanks.

        • wpbeginner says:

          @MarykeVanRensburg AFter the link area just add ,true

          our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.

  7. Sugeng Santoso says:

    I love this.

  8. Dragon Blogger says:

    Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with “related posts” there is limited real estate which is especially true for the growing trend of mobile browsing.

    • wpbeginner says:

      @Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.