This website uses cookies to allow us to see how the site is used. If you continue to use this site, we assume that you are okay with this. If you want to use the sites without cookies, please see our privacy policy.

Paginate WordPress posts with a thumbnail image

Its always nice to give your users the ability to paginate through your posts, and there are a couple of simple functions that will allow you to do so from with in the individual posts, by that I mean these functions should be used on the single.php template.

By using get_previous_post() and get_next_post() you can retrieve all the information you need from the previous or the next post adjacent to the currently viewed post. If you want to find out more go checkout the codex in the links provided for both functions.

Using the following you can output the link to the previous post of the currently viewed post:

<?php
   $previous = get_previous_post();
   echo get_permalink($previous->ID);
?>

using the get_next_post() you can do the same to get the opposite or get the adjacent post of the currently viewed post like so:

<?php
   $next = get_next_post();
   echo get_permalink($next->ID);
?>

Now that you can access the ID of the previous and next post we can use another function to get the thumbnail of those posts using the get_the_post_thumbnail() function like this:

<?php
    echo get_the_post_thumbnail($previous->ID, 'thumbnail');
?>
<!-- or -->
<?php
    echo get_the_post_thumbnail($next->ID, 'thumbnail');
?>

All you need to do now is to wrap the code up in your mark up to make it your own, putting it all together it might look something like this:

<?php $previous = get_previous_post(); $next = get_next_post(); ?>
<div class="wrapperdiv">
    <div class="float--left">
        <a title="<?php echo esc_attr($previous->post_title); ?>" href="<?php echo get_permalink($previous->ID); ?>">
            <?php echo get_the_post_thumbnail($previous->ID, 'thumbnail'); ?>
        </a>
    </div>
    <div class="float--right">
        <a title="<?php echo esc_attr($next->post_title); ?>" href="<?php echo get_permalink($next->ID); ?>">
            <?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
        </a>
    </div>
</div>

Your html markup and css should be adapted for your own designs but as long as you are on the single.php template then your users will now be able to paginate WordPress posts with a thumbnail image of the previous and next posts.

About

A geek who likes to code and be nice ^_^

2 thoughts on “Paginate WordPress posts with a thumbnail image

  1. Hi Elliott,

    Thanks for sharing this tutorial. I remember reading it somewhere but didn’t really struck my mind until seeing your post.

    Well written and thank you once again!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.