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.
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 :
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:
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:
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:
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.
Previous Resource5 Easy Steps to Completely Customize Your WordPress Login Screen
Next Resource3 Best SEO Rank Trackers in the Industry
Blog posts authored by Jameel with easy-to-navigate table of content
Starters Guide to Git & GitHub in Web Development
The Definitive Guide to 508 and ADA Website Compliance
3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme
Here's a couple of recommendations from Linkedn