Using thumbnails for post navigation in a custom WordPress theme

Pictures, not words

The WordPress theme I developed presents posts in a grid, either on the home page or to list the posts in a category or with a tag. Each post is represented by a thumbnail of the featured image, so the presentation of a number of post choices is graphical rather than textual.

I wanted the navigation to the next or previous post to be graphical as well. A picture is worth a thousand words, and all that.

Next post in the same category

I also wanted to offer the viewer the choice of next, previous or previous in the same category. So if she got to my site via a “Photography” post, I could offer another Photography post as an option at the end of the post. Once I got that working, I found the need to test whether the previous post and the previous post in the same category were in fact the same post, and suppress the category link in those cases.

Thank you, Mohammed Yassine Chabli

An answer in Stack Overflow gave me the basis of the code I needed. Thank you, Mohammed Yassine Chabli. I hope I got your name right. I had to modify it to use a CSS grid instead of floats, and add the part for next post in the same category. That code came from the WordPress Codex, with a test for same previous post that I managed all by myself.

The following code was extracted from my single.php file. More specifically, for those of you who, like me, use Pinegrow Web Editor, this comes from content-single-ub.php, which is brought into single.html via:

wp-include-template-part-slug=”ubtemplates/content-single-ub”

This code needs to be inside the loop.

PHP code for thumbnail post navigation

<h3>Other posts</h3> 
<?php the_tags('These are the tags attached to this post: '); ?>
<div id="cooler-nav" class="navigation">

    <?php $prevPost = get_previous_post();
    if ($prevPost) : ?>
        <div class="nav-box previous">
            <?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(297,198) );?>
            <p>Previous post: </p>
            <?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", false); ?>
        </div>
    <?php endif; ?>

    <?php $catPost = get_previous_post(true);
        if ($catPost AND ($catPost->ID != $prevPost->ID)) : ?>
        <div class="nav-box prevcat">
            <?php $catthumbnail = get_the_post_thumbnail($catPost->ID, array(297,198) );?>
            <p>From the same group:</p>
            <?php previous_post_link('%link',"$catthumbnail  <p>%title</p>", true); ?>
        </div>
    <?php endif; ?> 
    
    <?php $nextPost = get_next_post();
    if($nextPost) : ?>
        <div class="nav-box next">
            <?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(297,198) ); ?>
            <p>Next post: </p>
            <?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", false); ?>
        </div>                     
    <?php endif; ?>
    <br> 
</div> 

CSS

// Next, prev, prev-same-cat for single post
#cooler-nav .nav-box {
    padding: 8px
}

#cooler-nav img {
    margin: 0 10px 0 0;
}

#cooler-nav p {
    margin: 0 10px;
    font-size: 12px;
    vertical-align: middle;
}

#cooler-nav .previous {
    vertical-align: middle;
}

#cooler-nav .next {
}

#cooler-nav a p {
    font-weight: 700;
    font-size: 15px;
    line-height: 15px;
    padding-top: 9px;
}

#cooler-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

Disclaimers and don’t blame me

The days when I was fully confident about the ins and outs of my code are long past. These days, I’m happy if I can cobble together something that mostly works, so my intent is to share what I found in the hopes that it helps someone else, or nurtures an idea.

The one thing I’d like to add would be the ability to dig further down to find a “previous-previous” same category post if the previous one was a duplicate. At present, if I post two photography posts in a row, the latest one only offers a single choice of where to go. As it’s the latest post, there is no “Next”, and the previous in the same category is suppressed because it’s the same as the previous in any category. However, so far I haven’t come across a solution, but to be honest, I haven’t looked too hard either.

I was going to include a screen shot of what the final output looks like, but there’s no real need – just look down a bit and you’ll find it! Hope you found this as useful as I found the snippets that I borrowed.