How to Add Thumbnails to Previous and Next Post Links in WordPress

By default, WordPress displays previous and next post links at the bottom of each post for easy navigation.

Adding thumbnails to these links can make a big difference to your WordPress blog’s user experience. This simple change can catch your reader’s eye and keep them on your site longer.

In this article, we will guide you on how to add thumbnails to previous and next post links in WordPress to give your site a visual boost.

Why Display Thumbnails With the Previous and Next Post Links?

Your WordPress blog offers some helpful features to help visitors find new content and navigate your site. These features include navigation menus, a search bar, and a post archives widget.

Another helpful navigation feature is found at the bottom of each WordPress blog post. There, you will find links to your site’s previous and next posts.

These links build user engagement because when visitors finish reading one blog post, they might look for something else to read. However, if you add thumbnails, the links will look more interactive.

It’s also a great way to bring attention to your best-performing blog posts.

For example, you may have pillar content that is already driving a ton of traffic and converting those readers into email subscribers. Adding thumbnails with post links would only help you build your email list and grow your small business.

With that in mind, let’s take a look at how to add thumbnails to the previous and next post links in WordPress.

Using Thumbnails with Previous and Next Post Links in WordPress

To add thumbnails to your previous and next post links, you’ll have to add code to your WordPress theme’s files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

Adding Code Using WPCode

The first step is to add the following code snippet using WPCode, the best code snippets plugin. It allows you to add code without breaking your site and comes with plenty of ready-made templates, so you don’t have to write code from scratch.

To get started, you’ll need to install and activate the WPCode plugin. For more details, you can check out our article on how to install a WordPress plugin.

From there, go to the Code Snippets » + Add Snippet page. Then click on ‘Add New.’

You’ll be taken to a code snippet library, where you can choose from a wide variety of pre-made templates.

However, to add thumbnails to the previous and next post links, we’ll upload a string of custom code. So, let’s click on ‘Use Snippet’ under ‘Add Your Custom Code.’

The next step is to give the code snippet a name so that you can refer back to it later.

Then, simply copy the following code into the WPCode text editor. Make sure to select ‘PHP Snippet’ as the ‘Code Type.’

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    
    if ( $next_post || $prev_post ) : ?>
    
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
    
    <?php endif;
}

Once you’ve entered the snippet, you can toggle the button from ‘Inactive’ to ‘Active.’

It should look like this.

This will enable the code to work.

Then, you can simply click the ‘Update’ button.

Now, we’ll need to go back to Code Snippets » +Add Snippet page.

Again, under the ‘Add Your Custom Code’ option, you’ll select ‘Use Snippet’ and name it so you can refer back to it later.

Then, you can copy the following code and paste it into the WPCode text editor. Make sure to select ‘PHP Snippet’ from the ‘Code Type’ dropdown, too.

wpb_posts_nav();

This code tells WordPress where to show the navigation with the featured image.

Now, you’ll want to scroll down to the ‘Insertion’ section and click on the dropdown next to ‘Location.’

From here, go to ‘Page-Specific’ and choose ‘Insert After Post.’ That way, the thumbnails will appear properly next to the links.

Finally, you can toggle on the ‘Active’ and click ‘Update.’

After saving your changes, you can use this function in the template where you want to show previous and next post links with thumbnails.

And that’s it – you’ve added and configured your previous and next post thumbnails!

Now, when you view a post on your website, you will see that the previous and next links at the bottom of the post now have thumbnails.

Alternative: Displaying Popular Posts with Thumbnails

Another way to engage your readers after they read a post is to display a list of popular posts after each article. This will allow your readers to see your best content rather than just the previous and next published articles.

Your popular posts contain your most successful content. Displaying them to your visitors will build trust, improve social proof, and ensure that your visitors stay on your website longer.

When you check the first method in our guide on how to display posts by views in WordPress, you’ll learn how easy it is to add popular posts using the MonsterInsights plugin.

MonsterInsights’ Popular Posts Widget offers a wide range of attractive themes and a lot of customization options.

Or you can see our guide on how to add custom after-post widgets in WordPress, where you can learn how to add various types of content to the end of each blog post.

We hope this tutorial helped you learn how to use thumbnails with previous and next post links in WordPress. Next, you may also want to learn how to crop and edit WordPress post thumbnails or how to add featured video thumbnails in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.