Do you want to add numeric pagination in your WordPress theme?
By default, WordPress themes add a Next / Previous links at the bottom of archive pages. The challenge is that those aren’t very user friendly. This is why many popular blogs use numeric pagination to make it easier for visitors to navigate their archive pages.
In this article, we will show you how to add numeric pagination in your WordPress theme.
Why Add Numeric Pagination in Your WordPress Theme?
Most themes have an archive page that shows a list of posts. As you publish more WordPress blog posts, your archive page will span multiple pages.
Pagination links help visitors move between the archive pages, and typically appear at the bottom of your WordPress website.
Some WordPress themes use ‘Older posts’ and ‘Newer posts’ links for pagination. However, this only lets the visitor move forward and backward by one page.
It also doesn’t show the visitor’s current location in the archive. This can make it more difficult for visitors to navigate your blog’s archive.
That’s where numeric pagination comes in.
Instead of showing ‘Older’ and ‘Newer’ links, numeric pagination shows a series of numbers that let visitors jump to a specific page in the archive.
Numeric pagination may also use highlights or different colors to show the current page number, so the visitor always knows exactly where they are in the archive.
At WPBeginner, we use numeric pagination and highlight the current page number in orange. We also provide direct links to the 4 pages surrounding the visitor’s current page.
We even have a link to the last page in our archive, so visitors can quickly and easily see our earliest posts, as you can see in the following image.
In our experience, this kind of numeric pagination makes your site easier to navigate compared to the default ‘Older posts’ and ‘Newer post’ links.
If your WordPress theme has ‘Older’ and ‘Newer’ pagination, then we always recommend replacing it with numeric pagination.
In this guide, we will cover two different ways to add numeric pagination in your WordPress theme. If you prefer to jump straight to a particular method, then you can use the links below.
The easiest way to add numeric pagination in WordPress is by using the WP-PageNavi plugin.
To use this plugin, you’ll still need to make some changes to your theme’s code, but it is a lot easier than the full code method because WP-PageNavi gives you complete control over your site’s pagination.
First thing you need to do is install and activate the WP-PageNavi plugin. For more details, please see our step by step guide on how to install a WordPress plugin.
After activating the plugin go to Settings » PageNavi to configure the plugin settings.
Here, you can replace any of the default pagination text with your own wording. For example, you can change the text that your website uses for its ‘First Page’ and ‘Last Page’ links.
You can also customize the numeric pagination links.
In the ‘Number Of Pages To Show’ section, you can choose how many pages the plugin will show in your website’s pagination section.
This is set to 5 by default, which means WP-PageNavi will show direct links to 5 pages.
As you can see in the screenshot below that if you’re on page 4, then you’ll see links to pages 2, 3, 4, 5, and 6.
You may want to show more pages or less pages. To make this change, simply type the new number into the ‘Number Of Pages To Show’ field.
By default, the plugin will show several larger numbers. This lets visitors move forward by multiple pages, with just one click.
By default, the plugin shows three larger numbers that increase by 10 each time. For example, 10, 20, and 30.
Want to use a different interval, such as 5 or 20? Then simply type the new interval into the ‘Show Larger Page Numbers In Multiples Of’ field.
Every WordPress site is different, so it’s a good idea to try different settings to see what pagination settings work the best for you.
If you’ve made any changes to the WP-PageNavi settings, then don’t forget to scroll to the bottom of the page and click on the Save Changes button.
Next, you need to add a template tag in your WordPress theme. To do this, we recommend creating a child theme and then editing the child theme’s code.
By creating a child theme, you can still update your WordPress theme safely without losing your custom numeric pagination. To learn more, see our step by step guide on how to create a WordPress child theme.
No matter whether you choose to edit a parent or child theme, you’ll need an FTP client. If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP.
When you’re connected to your WordPress hosting account via FTP, you’re ready to edit your WordPress theme code.
These steps will vary depending on your WordPress theme. However, you’ll typically need to edit the code in your index.php or archive.php file, plus any other archive template files in your WordPress theme.
Simply open these files and then search for the previous_posts_link and next_posts_link tags.
If you find these tags, then replace them with the following code snippet:
Some themes may not have a previous_posts_link or next_posts_link tag.
If you can’t find these tags in your theme, then look for the_posts_navigation instead. For example, you’ll find the following in the Twenty Twenty-One theme’s archive.php file:
