How to Add WordPress Next Previous Post with Thumbnail Pagination

Adding pagination to your WordPress site should not be a complicated process. In fact, with minimal programming knowledge, you can easily change your default post pagination to numbered WordPress pagination as illustrated in my previous tutorial about numeric WordPress pagination. Today, I want us to focus on creating pagination for the single post that has featured images that you have probably come across in multiple magazine WordPress themes.

Table of Contents

It is common to see WordPress next previous post with thumbnail and a title below the single post or at the top depending on the design of the theme.

WordPress Next Previous Post with Thumbnail Example

For example in one of the best-selling WordPress magazine theme – Newspaper, you can see the single post has a pagination with a thumbnail as shown in the image below:

The image above represents a good example of a WordPress single post with next previous pagination that has a thumbnail.

By the end of this WordPress development tutorial, you should easily add the code we create to your WordPress plugin or theme and display the WordPress next previous post with thumbnail as seen in the Newspaper WordPress theme.

Next Previous WordPress Pagination Code

In a nutshell, the two important code snippets that you need to have is one that gets the previous or the next post and another one that retrieves the featured image of the specific post (either next to or previous)

For illustration in this tutorial, we are going to use the Twenty Seventeen default WordPress theme which is my favourite for a number of reasons; one of the reasons is its simplicity.

This code will definitely work across all other WordPress themes or plugins. So for the start, we have the theme installed and activated with a sample single post published.

Getting Started

As you can see on the image below as indicated by the arrow, below the post there is no pagination for the next previous posts. In this section, we will add the WordPress next previous post with thumbnail pagination.

The first step is to locate the filesingle.php in your theme since it is the file where we will be adding the code just below the_content() and inside the loop.

After you locate the single.php file the next step is to create two variables $next and $prev that are assigned to two WordPress core functions; get_next_post() and get_previous_post() respectively as shown in the code snippet below :

<?php
$prev = get_previous_post();
$next = get_next_post();
?>

These two functions are similar in the way they work; the previous function retrieves the previous post while the next function retrieves the next post as objects.

For demonstration I have published the three posts as shown in the image below:

Now we need to get the previous post title and the thumbnail and also ensure we wrap them in a href tag with the respective permalink that helps make the links clickable:

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

</a>

Next, we get the next post title and the thumbnail and also wrap with a href tag and the permalink for the next post as the href tag value:

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

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

</a>

Up to this point, we have the code that is working which can display WordPress next previous post with thumbnail. The complete code up to this step should be as shown below:

<?php

$prev = get_previous_post();
$next = get_next_post();

// the previous post title and thumbnail

?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

</a>

<?php

// the next post title and thumbnail

?>

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

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

</a>

<?php

Add this code to the single.php file and ensure you escape the HTML with appropriate PHP opening and closing tags and update the file then check the changes in the frontend.

You should see the previous post and the next post thumbnail with the title displayed as shown in the image below:

Styling WordPress Previous Next Post

Now we need to introduce two divs and add the appropriate styles to ensure we float each of the posts on each side. We can achieve this by wrapping the code with two divs as shown below:

<div class="clearfix">

<?php

$prev = get_previous_post();

$next = get_next_post();

// the previous post title and thumbnail

?>

<div class="post-box prevPost">

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

</a>

</div>

<?php

// the next post title and thumbnail

?>

<div class="post-box nextPost">

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

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

</a>

</div>

</div>

<?php

After adding the classes for the divs we can now apply the styles using CSS as shown below :

* {
  box-sizing: border-box;
} 

.post-box {
  float: left;
  width: 50%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.post-box.prevPost img {
    max-width: 40%;
    height: auto;
}
.post-box.nextPost img {
    max-width: 40%;
    height: auto;
}

Conclusion

With this code, you can easily add the WordPress next previous post pagination with a thumbnail. You can also add better styles to improve the visual presentation of the single post pagination. After adding the CSS code you should see the layout of the two posts appear as shown in the image below

It is also important that you check if the thumbnail or post exists by adding a conditional statement. For example, you can wrap the $prev section with a condition as shown below:

<?php

$prev_ = get_previous_post();

if ( ! empty( $prev ) ): ?>

    <a href="<?php echo get_permalink( $prev->ID ); ?>">

        <?php echo apply_filters( 'the_title', $prev_post->post_title ); ?>

    </a>

<?php endif; ?>

Code validation is an important part of WordPress development and should not be overlooked. I hope this post has given you some insight and you can now add single post pagination with a thumbnail on your site or theme. If you want to learn how to create WordPress blog pagination, you can check out this previous tutorial – how to create number pagination in WordPress.

If you need more assistance you can get help from a WordPress theme developer especially for those users who do not understand how the code works. You can also get in touch with me for help.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Add WordPress Next Previous Post with Thumbnail

WordPress Next Previous Post with Thumbnail Example

Next Previous WordPress Pagination Code

Getting Started

Styling WordPress Previous Next Post

Conclusion

Similar Articles

Related