3 Easy Steps to Add Previous & Next Post Pagination to Your WordPress Theme

Internal linking posts adds major value for SEO and introducing readers to more of your content. Learn How to Add Previous and Next Post Pagination to a WordPress Theme in 3 Easy Steps.

Table of contents

1 Create Your Pagination Markup

We’re gonna start off by adding the simple HTML markup of our Next and Previous pagination buttons. For an example of what we’re creating, take a look at the bottom of this post. Beautiful right? So let’s get started.

Navigate over to your single.php file and add the following HTML just below your the_content section :

Pagination HTML markup with bootstrap classes

    
    <div class="row">
    	<div class="col-md-6">
    		<h4>Previous Post</h4>
    		<p><small>My previous post title</small></p>
    	</div>
    	<div class="col-md-6 text-right">
    		<h4>Next Post</h4>
    		<p><small>My next post title</small></p>
    	</div>
    </div>

In The Code

The code feature just simple HTML markup of the previous and next post pagination using Bootstrap 4 classes.

2 Making the Content in Your Pagination Area Dynamic

Now that we have our bare bones HTML set take a look at your website to see how it renders. It may look a bit boring now, but that’s fine, it’ll get better as we get toward the end of this article, I promise.

Let’s work on making the content within our pagination buttons dynamic. This means your previous post link will show the linked title of the post you previously posted, while your next post button will show the linked title of your next latest post.

Just replace the code we just added to your single.php file with the following code:

Dynamic Pagination without conditionals

    
      <div class="row">
          <?php
              $next_post_link = get_next_post_link('%link');
              $previous_post_link = get_previous_post_link('%link');
          ?>
          <div class="col-md-6">
              <h4>Previous Post</h4>
              <p><small><?php echo $previous_post_link; ?></small></p>
          </div>
          <div class="col-md-6 text-right">
              <h4>Next Post</h4>
              <p><small><?php echo $next_post_link; ?></small></p>
          </div>
      </div>

In The Code

The code above expands on the last HTML by adding two well known WordPress functions get_previous_post_link(‘%link’) and get_next_post_link(‘%link’). The functions set within our own variables and are echoed within our paragraph tags. To learn more about the functions used in my code, just click the bolded names above.

3 Hiding the Next and Previous HTML Markup if No Post Exists

Go ahead, take a look at what we just added to your theme. Go to one of your blog posts and hit refresh. Neat huh? But you will notice that once you go to your last post, no next title link shows, but the empty markup is still visible.

The same happens when you go to your first post. But this is an easy fix, we just need to add a couple conditionals to our code. See my example below:

Dynamic Pagination with conditionals

    
      <div class="row">
        <?php
              $next_post_link = get_next_post_link('%link');
              $previous_post_link = get_previous_post_link('%link');
          ?>
          <?php if ( $previous_post_link ) : ?>
            <h4>Previous Post</h4>
            <p><small><?php echo $previous_post_link; ?></small></p>
          </div>
          <?php else : ?>
          <?php endif; ?>
          <?php if ( $next_post_link ) : ?>
            <h4>Next Post</h4>
            <p><small><?php echo $next_post_link; ?></small></p>
          </div>
          <?php else : ?>
          <?php endif; ?>
      </div>

In The Code

The code above simply adds a PHP if condition that hides the HTML markup of our next post button if none exists, and vice versa for the previous button.

BONUS Let’s Make It Beautiful

Once you’ve saved your code, take a look at the changes in your browser. Now you should see on the last post, no empty markup appears, and vice versa.

You are now good to go. Our buttons are nice and functional but, they’re not astectly pleasing. So let beautify them. See my example below:

Complete pagination with icons

    
      <div class="row">
      	<?php
      	$next_post_link = get_next_post_link('%link');
      	$previous_post_link = get_previous_post_link('%link');
      	?>
      	<?php if ( $previous_post_link ) : ?>
      	<div class="border border-light pl-1 rounded-left col-md-6">
      		<div class="h-100 float-left mr-2">
      			<i class="fa fa-chevron-left mt-3 fa-4x grey-text" aria-hidden="true"></i>
      		</div>
      		<h4 class="red-text mt-3">Previous Post</h4>
      		<p><small><?php echo $previous_post_link; ?></small></p>
      	</div>
      	<?php else : ?>
      	<?php endif; ?>
      	<?php if ( $next_post_link ) : ?>
      	<div class="border border-light pr-1 text-right rounded-right col-md-6">
      		<div class="h-100 float-right ml-2">
      			<i class="fa fa-chevron-right mt-3 fa-4x grey-text" aria-hidden="true"></i>
      		</div>
      		<h4 class="red-text mt-3">Next Post</h4>
      		<p><small><?php echo $next_post_link; ?></small></p>
      	</div>
      	<?php else : ?>
      	<?php endif; ?>
      </div>

In The Code

In the code above we just added Font Awesome chevron icons within 100% height floated divs. We also added a light borders with rounded edges with the proper spacing for all of our elements and possible with Bootstrap 4 classes.

Wrapping Things Up

Congratulations, Within a couple minutes you’re nearly mastered the art of creating your own dynamic next and previous post pagination. We’ve even created a couple Bootstrap 4 examples that you can use in all of your websites as a bonus.

If you like to expand on this post you can even add links to your icon or headings using additional WordPress functions. If you come up with anything cool, come back a comment about it.