Next & Previous Post Titles With Thumbnails

Bane Unreinen
(@bane-unreinen)

14 years, 2 months ago

I am building a custom theme and taking advantage of a relatively new feature in WordPress, post thumbnails (http://codex.wordpress.org/Post_Thumbnails). Since the documentation is still pending, I figured that others may find this useful too. Keep in mind that this is to be placed in the single.php file.

Here is the code to grab the next post title & the thumbnail:

<?php next_post_link('« %link','%title', TRUE); ?><br /><?php $nextPost = get_next_post(true); $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(150,150) ); echo $nextthumbnail; ?>

And this is the code to grab the previous post title & the thumbnail:

<?php prev_post_link('%link »','%title', TRUE); ?><br /><?php $prevPost = get_prev_post(true); $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) ); echo $prevthumbnail; ?>

I hope that this is useful, and remember that your theme must have post thumbnails activated in order to work.

Viewing 12 replies - 1 through 12 (of 12 total)

Thread Starter Bane Unreinen
(@bane-unreinen)

14 years, 1 month ago

ok, so I have it working almost perfectly. But I am having a problem in preventing the thumbnail from showing up when there is no next/previous post; like the next/previous links do.
I other words, when I’m at the last (or first) post of a category, it show the current post thumbnail. Any ides on how to correct this?

Michael
(@alchymyth)

14 years, 1 month ago

test if the $nextPost / $prevPost variables are ‘filled’:

<?php $nextPost = get_next_post(true); if($nextPost) { /*nextthumb*/ } ; ?>

<?php $prevPost = get_previous_post(true); if($prevPost) { /*prevthumb*/ } ; ?>

Thread Starter Bane Unreinen
(@bane-unreinen)

14 years, 1 month ago

@alchymyth: thanks! worked like a charm.

Patrick_O
(@patrick_o)

14 years, 1 month ago

@ alchymyth,
I’ve searched high and low for this solution, but could find it anywhere…
Loads of thanks!

lilqhgal
(@lilqhgal)

13 years, 11 months ago

This is awesome but for some reason my theme is throwing a Call to undefined function for prev_post_link in the second snippet above. Any ideas why?

Mark / t31os
(@t31os_)

13 years, 11 months ago

I believe that should actually be previous_post_link.

eg.
http://codex.wordpress.org/Template_Tags/previous_post_link

colinpeddle
(@colinpeddle)

13 years, 10 months ago

I had to make a couple adjustments to the code for the previous post call.

<?php previous_post_link(‘%link »’,’%title’, TRUE); ?>
<?php $prevPost = get_previous_post(true); $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) ); echo $prevthumbnail; ?>

I’ve put them in bold.

colinpeddle
(@colinpeddle)

13 years, 10 months ago

Also, perhaps it’s the modifications I’ve made, but shouldn’t the thumbnails also be linking to the next or previous post?

Paul de Wouters
(@pauldewouters)

13 years, 6 months ago

you can do that by using the function from Justin’s post :
http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature
itsbarry
(@itsbarry)

13 years, 6 months ago
Cool tip!

Colin this is how I made my thumbnails clickable:
```
<div id="cooler-nav" class="navigation">
                <?php $prevPost = get_previous_post(true);
					if($prevPost) {?>
					<div class="nav-box previous" style="float:left;">
                    <?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );}?>
                    <?php previous_post_link('%link',"$prevthumbnail  %title", 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  %title", TRUE); ?>
                    </div>
                </div>
```
(I actually put html line breaks before %title but they don’t appear in my code block^)
jjkilpatrick
(@e3ekiel)

13 years, 6 months ago

When I get to the last post i’d like it to show a default image of a cross. Any idea of how to do this?

Thanks

ishotr
(@ishotr)

13 years, 3 months ago

This also works.

<?php $prevPost = get_previous_post(true); $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) ); echo $nextthumbnail; ?><?php previous_post_link( '%link', $prevThumbnail ); ?>

using it on the sidebar of for Celebrity is hotter

it’s clickable too.