Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Would you like to display thumbnails with the previous and next post links in WordPress?

At the bottom of each post, WordPress displays links to the previous and next posts for easy navigation. Adding thumbnails to these links will make them more appealing to your readers.

In this article, we’ll show you how to use thumbnails with previous and next post links in WordPress.

How to use Thumbnails with Previous and Next Post Links in WordPress

Why Display Thumbnails With the Previous and Next Post Links?

Your WordPress blog offers some helpful features to help your visitors find new content and navigate around 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 blog post in WordPress. There you will find links to the previous and next blog posts on your site.

You Find Links to the Previous and Next Posts at the Bottom of Each Blog Post

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

With that being said, 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 to Your Theme’s functions.php File

The first step is to add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

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 save your changes, this function can be called from the template where you wish to display previous and next post links with thumbnails.

Adding Code to Your Theme’s single.php Template

Next, you need to open your theme’s single.php file. This file already includes code that adds previous and next post links without thumbnails. You will first need to remove that code.

For example, here’s a screenshot of the Twenty TwentyOne theme’s single.php file. Look for the section labeled // Previous/next post navigation.

Remove The_Post_Navigation Section from Your Theme's Single.php Template

Now you need to delete the code in that section starting with the_post_navigation until the end of the loop. After that, you should paste the following code its place:

wpb_posts_nav();

Make sure you save the file when you’re finished.

Adding CSS Code to Your Theme’s Style Sheet

To style the previous and next links, you will need to add custom CSS to your theme’s stylesheet. You can learn more in our guide on how to easily add custom CSS to your WordPress site.

Add this code to your theme’s styles.css file or using the WordPress theme customizer:

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}

.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}

.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}

.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}

.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}

.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}

.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

Don’t forget to save your changes.

Previewing the Previous and Next Links with 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.

Preview of Previous and Next Links With Thumbnails

If one of the linked posts does not already have a featured image, then you will not see a thumbnail. To learn how to add thumbnails to a post, see our guide on how to add featured images or post thumbnails in WordPress.

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 give your readers a chance to see your best content, rather than just the previous and next articles that were published.

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 as well as a lot of customization options.

MonsterInsights Popular Posts Widget

You may also want to 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. You may also want to learn how to speed up WordPress performance, or check out our list of the best social media plugins for 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

19 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Atesz says

    Hello,
    thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:

    add_shortcode( ‘custom-post-nav’, ‘wpb_posts_nav’ );

    but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
    The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).

    Do you know where is the problem?
    Thank you in advance!

  3. Sekh Sahajahan says

    Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.

  4. MarykeVanRensburg says

    I got it to work. It seems the } in this “<?php } ?>” was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks

  5. MarykeVanRensburg says

    Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.

      • MarykeVanRensburg says

        @wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:

        ‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),

        and I need to change it to show a thumbnail and only a certain category. Thanks.

        • wpbeginner says

          @MarykeVanRensburg AFter the link area just add ,true

          our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.

  6. Dragon Blogger says

    Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with “related posts” there is limited real estate which is especially true for the growing trend of mobile browsing.

    • wpbeginner says

      @Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.