How to Use Thumbnails for Previous/Next Navigation in Wordpress

Hey all. This is just a quick message to let you know that Theme Thesis is finally on Facebook. Make sure to become a fan. Or a liker. Or whatever. See ya' there! - Matt

Almost every Wordpress theme you’ll come across has support for going to the previous or next post. That’s all well and good, but in Wordpress 2.9 we got the ability to have post thumbnails. Wouldn’t it be great to use thumbnails instead of or alongside our post titles? The answer is yes, it would. So I embarked on a journey to figure out how to add this functionality to your theme, and have posted the results below. First for regular Wordpress users, and then for Thesis users.

1. Add post thumbnail support

   Open up functions.php and place add_theme_support(‘post-thumbnails’); in there, if it isn’t there already.

2. Add the code

   Open single.php and go down to where the previous_post_link and next_post_link is situated. If your theme doesn’t have that already, then just find a proper place for the thumbnails. Place the following code in:

   <?php
   $prevPost = get_previous_post();
   $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) );
   previous_post_link('%link',''.$prevthumbnail.'', TRUE);
   ?>
   
   <p class="prev_next2"><?php previous_post_link('%link','<') ; ?>
   
   <?php
   $nextPost = get_next_post();
   $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(150,150) );
   next_post_link('%link',''.$nextthumbnail.'', TRUE);
   ?>
   <p class="prev_next2"><?php previous_post_link('%link','>') ; ?></p>
   

   And that’s it for the code. The 150,150 is the size of the thumbnail, so feel free to experiment with that. You can style the thumbnail by targetting .wp-post-image in your css. The ‘<' can be changed to ‘%title’ if you’d like to put your previous/next titles in there instead of an arrow, and this can be styled by targeting p.prev_next2.

3. Add post thumbnails to your post

   Go into your post screen on the dashboard, and make sure you have an image set for “Featured image” on the right hand size. This is where the thumbnail will come from.

4. For Thesis users:

The trick works the same for Thesis, only instead of placing it in single.php, place it in a function like follows:

function prev_next(){
if (is_single()) {
?>

// CODE HERE

<?php } }
add_action('thesis_hook_after_content, 'prev_next);
remove_action('thesis_hook_after_content','thesis_prev_next_posts');

The remove_action gets rid of the previous/next navigation that is already built in.

Sources:

Wordpress support forums
Digging into Wordpress

Stay Updated

Or subscribe via RSS

You'll notice this site talks about the Thesis theme for Wordpress. Don't know what the heck that is? Find out.