How to Add Next/Previous Post Links with Thumbnails in WordPress

Navigating between posts is a key part of a smooth blog experience. In WordPress, adding next and previous post links with featured thumbnails not only improves user engagement but also enhances the overall aesthetics of your site. In this tutorial, we’ll walk you through how to add this feature to your single post template.

---

What You’ll Need:

• A WordPress theme with access to single post templates
• Posts with featured images
• Basic knowledge of PHP and WordPress theme files

---

Step 1: Locate WordPress Template for Next Previous Post Links

Navigate to your theme folder (/wp-content/themes/your-theme-name/) and open:

• single.php or
• template-parts/content-single.php (depending on your theme structure)

Insert the following code where you’d like the navigation to appear — usually at the end of the post content.

---

Step 2: Add PHP Code for Next Previous Post Links with Thumbnails

<?php
// Get previous post from same category
$prev_post = get_previous_post(true);
if (!empty($prev_post)) {
    $prev_thumbnail = get_the_post_thumbnail($prev_post->ID, 'thumb-xlarge');
    echo '<div class="prev-post-box">';
    echo '<a href="' . get_permalink($prev_post->ID) . '" class="nav-previous">';
    echo $prev_thumbnail;
    echo '<div><span><span class="chevron-left"></span> Previous</span>' . get_the_title($prev_post->ID) . '</div></a>';
    echo '</div>';
}

// Get next post from same category
$next_post = get_next_post(true);
if (!empty($next_post)) {
    $next_thumbnail = get_the_post_thumbnail($next_post->ID, 'thumb-xlarge');
    echo '<div class="next-post-box">';
    echo '<a href="' . get_permalink($next_post->ID) . '" class="nav-next">';
    echo $next_thumbnail;
    echo '<div><span>Next <span class="chevron-right"></span></span>' . get_the_title($next_post->ID) . '</div></a>';
    echo '</div>';
}
?>

Replace 'thumb-xlarge' with any registered image size (like 'medium', 'large', or your custom size).

Step 3: Style Your WordPress Next Previous Links with CSS

To make the links visually appealing, add some CSS to your theme’s style.css:

.prev-post-box, .next-post-box {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    text-align: center;
    margin-top: 20px;
}

.nav-previous, .nav-next {
    display: block;
    color: #000;
    text-decoration: none;
}

.nav-previous img, .nav-next img {
    max-width: 100%;
    border-radius: 8px;
}

.chevron-left::before, .chevron-right::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
}

.chevron-left::before {
    content: '\f104'; /* FontAwesome left */
}

.chevron-right::before {
    content: '\f105'; /* FontAwesome right */
}

Make sure Font Awesome is loaded if you’re using the icons.

---

Bonus Tip: Fallback to Custom Post Type

You can even display a fallback post (like latest from a CPT) if the next/previous doesn’t exist — useful for newer posts or special promotions.

<?php
// Get previous post from same category
$prev_post = get_previous_post(true);
if (!empty($prev_post)) {
    $prev_thumbnail = get_the_post_thumbnail($prev_post->ID, 'thumb-xlarge');
    echo '<div class="prev-post-box">';
    echo '<a href="' . get_permalink($prev_post->ID) . '" class="nav-previous">';
    echo $prev_thumbnail;
    echo '<div><span><span class="chevron-left"></span> Previous</span>' . get_the_title($prev_post->ID) . '</div></a>';
    echo '</div>';
} else {
    // Fallback: Get latest post from a custom post type (e.g., promotions)
    $fallback_prev = get_posts([
        'post_type' => 'promotions',
        'posts_per_page' => 1,
        'orderby' => 'date',
        'order' => 'DESC'
    ]);

    if ($fallback_prev) {
        $fp = $fallback_prev[0];
        $fp_thumbnail = get_the_post_thumbnail($fp->ID, 'thumb-xlarge');
        echo '<div class="prev-post-box">';
        echo '<a href="' . get_permalink($fp->ID) . '" class="nav-previous">';
        echo $fp_thumbnail;
        echo '<div><span><span class="chevron-left"></span> From Promotions</span>' . get_the_title($fp->ID) . '</div></a>';
        echo '</div>';
    }
}

// Get next post from same category
$next_post = get_next_post(true);
if (!empty($next_post)) {
    $next_thumbnail = get_the_post_thumbnail($next_post->ID, 'thumb-xlarge');
    echo '<div class="next-post-box">';
    echo '<a href="' . get_permalink($next_post->ID) . '" class="nav-next">';
    echo $next_thumbnail;
    echo '<div><span>Next <span class="chevron-right"></span></span>' . get_the_title($next_post->ID) . '</div></a>';
    echo '</div>';
} else {
    // Fallback: Get latest post from a custom post type (e.g., promotions)
    $fallback_next = get_posts([
        'post_type' => 'promotions',
        'posts_per_page' => 1,
        'orderby' => 'date',
        'order' => 'DESC'
    ]);

    if ($fallback_next) {
        $fn = $fallback_next[0];
        $fn_thumbnail = get_the_post_thumbnail($fn->ID, 'thumb-xlarge');
        echo '<div class="next-post-box">';
        echo '<a href="' . get_permalink($fn->ID) . '" class="nav-next">';
        echo $fn_thumbnail;
        echo '<div><span>From Promotions <span class="chevron-right"></span></span>' . get_the_title($fn->ID) . '</div></a>';
        echo '</div>';
    }
}
?>

This ensures that your post navigation always shows content, even when at the end or beginning of your main post sequence.

---

Final Thoughts on Adding Next Previous Post Links in WordPress

Adding next/previous links with thumbnails enriches your WordPress post navigation and gives your readers a more engaging experience. With a bit of PHP and CSS, you can customize this feature to match your theme and content flow.

Enhancing User Experience

Adding smooth transitions, hover effects, or even related posts below the navigation can further enrich the browsing experience. You can also track engagement on these links using event tracking in Google Analytics. Additionally, you might consider using animations or custom icons to draw attention to the post navigation, making it more interactive and engaging. This not only enhances aesthetics but also improves click-through rates. For mobile users, ensure the layout is responsive and the images are optimized to load quickly. These small UX improvements can significantly reduce bounce rate and improve overall session duration on your blog. Finally, test the feature across different themes and devices to ensure compatibility and a seamless user journey.