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.
- Method 1. How to add numeric pagination in WordPress using WP-PageNavi
- Method 2. How to manually add numeric pagination in your WordPress theme
Method 1. How to Add Numeric Pagination in WordPress using WP-PageNavi
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:
<?php wp_pagenavi(); ?>
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:
<?php /*twenty_twenty_one_the_posts_navigation();*/
You can then go ahead and replace this line with the following code snippet:
<?php wp_pagenavi(); ?>
After making these changes, save and then close any open WordPress theme files.
Now, if you visit your WordPress archive page you should see your new numeric pagination live on your website.
At this point you may want to change the color and style of the numeric pagination, so it better compliments your theme or website branding.
You can do this by editing the plugin’s code.
However, we recommend pasting the WP-PageNavi code into your theme’s style.css file, and then making your changes inside the theme file. This means you won’t lose your customizations when you update the WP-PageNavi plugin.
To copy your plugin code, head over to Settings » PageNavi. You can then find the ‘Use pagenavi-css.css’ section and click on the ‘No’ radio button next to it.
Don’t forget to click on the ‘Save Changes’ button to save your changes.
Next, go to Plugins » Plugin File Editor.
You can then open the ‘Select plugin to edit’ dropdown and choose ‘WP-Page Navi’. After that, you’re ready to click on ‘Select.’
In the right-hand menu, click on the pagenavi-css.css file.
Then, go ahead and copy all the code in this file.
Next, simply go to Appearance » Theme File Editor.
In the right-hand menu, click on your theme’s style.css file.
You can now paste your pagenavi-css.css code into the theme’s style.css file, and start making your changes.
Let’s look at an example. Here’s a modified version of the numeric pagination code that you can add to your theme’s style.css file:
wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #FFF;
text-decoration: none;
background-color:#6FB7E9;
border: 1px solid #B2D1E5;
padding: 5px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #E9F2F9;
background-color:#6FB7E9;
}
.wp-pagenavi span.current {
font-weight: bold;
background-color:#3C8DC5;
}
In the following image, you can see how this numeric pagination will look on your site.
It’s worth trying different styles to see what looks the best on your WordPress website.
When you’re happy with how your numeric pagination looks, click on the Update File button to save your changes.
Method 2. How to Manually Add Numeric Pagination in Your WordPress Theme
Another option is to manually add numeric pagination in your WordPress theme using code.
Many WordPress themes come with built-in ‘Older’ and ‘Newer’ links, or default numeric pagination. For example the popular Astra theme automatically adds its own numeric pagination to your archive pages, as you can see in the following image.
You can use this method to customize a theme’s built-in pagination. For example, you might change the styling to better suit your site.
To manually add numeric pagination, open your theme’s functions.php file. Here you can use either an FTP client or the file manager of your WordPress hosting cPanel. If you’re using FTP, then you can see our complete guide on how to connect to your site using FTP.
Once you’ve successfully connected to your site, open the functions.php file and add the following code:
function wpbeginner_numeric_posts_nav() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<div class="navigation"><ul>' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}
/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li>…</li>' . "\n";
$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
This code gets the number of pages, ready for you to show in your WordPress theme.
The next steps will vary depending on your theme.
If your theme doesn’t have some form of default pagination built-in, then you can simply add the following template tag in your index.php, archive.php, category.php, or any other page where you want to show numeric pagination.
<?php wpbeginner_numeric_posts_nav(); ?>
Just be aware that where you add this code will affect where the numeric pagination is displayed on your website.
Typically, you’ll want to show the pagination at the bottom of your archive pages, so you’ll usually want to add the template tag to your footer code.
Does your theme already have some form of pagination, such as ‘Older Posts’ and ‘Newer Posts’ links?
In this case, you’ll need to find the pagination code and replace it with the above snippet.
For example, Ashe is one of the best free WordPress blog themes and already adds ‘First’ and ‘Last page’ pagination links to your archive pages.
To replace these built-in links with numeric pagination, you need to edit the theme’s templates/grid.php and templates/blog-pagination.php files.
In each of these files, simply find the following section:
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
You can then go ahead and replace this line with the following code snippet:
<?php wpbeginner_numeric_posts_nav(); ?>
Once you’ve added the code, don’t forget to save your changes.
The next step is styling your custom numeric pagination.
To help visitors navigate the archive, we’re going to highlight the current page number with a different color. To do this, open your theme’s style.css file and then paste the following code into this file:
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: #fff;
text-decoration:none;
}
.navigation li {
display: inline;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}
After all that, simply save your changes by clicking on the Update File button.
Now if you visit the archive page, you’ll see the numeric pagination live on your website.
We hope this article helped you learn how to add numeric pagination in your WordPress theme. You can also go through our guide on ways to make money online blogging with WordPress and how to create a custom WordPress theme without writing any code.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Emmy Clifford
How can you make the “Previous” and “Next” buttons to be bolder without theming?
WPBeginner Support
You would need to use CSS to style that, if you use WP-PageNavi then we would recommend checking with their support for their recommended method or if they have a built-in option for it.
Admin
Kzain
this is helpful but how do I know if my theme works with pagination? and what happens if I use the Elementor paginations button to related post section
WPBeginner Support
If your theme or page builder already has a pagination option, we would recommend using that first instead of the method from this guide
Admin
Jiří Vaněk
I use the Generate Press theme, and I found a snippet that works great for extending the pagination bar to more pages. However, I now see, according to this article, that I could also customize the pagination bar to match the look of my website. I will probably very soon try your guide on customization and will try to style the bar better to match the colors of my site. It is a minor detail, but this bar is quite visible and important. Thanks.
Sujal
There’s little bug in last lines which shows next link. You’re missing $ sign at two places get_next_posts_link() . Can you please fix that so code works well for new visitors
/** Next Post Link */
if ( $get_next_posts_link() )
printf( ‘%s’ . “\n”, $get_next_posts_link() );
Sandipan
Not working. . After adding the code index.php links not working
WPBeginner Support
Your theme may have some custom styling, you would want to reach out to your theme’s specific support and they should be able to assist.
Admin
Quy
thanks.
Normally, home.php will show up the loop content for Post page, but since my theme does not provide home.php by default so I put the wpbeginner_numeric_posts_nav(); at index.php (below endwhile;) and it works.
WPBeginner Support
Thanks for sharing how you were able to solve the issue
Admin
FloJDM
Very Helpful Thx !
WPBeginner Support
You’re welcome
Admin
Alexandre
Awesome article, simple and straight to the point!
It worked perfectly for me, thanks a lot!!
WPBeginner Support
Glad our guide was helpful
Admin
ModGirl
I’m using the wordpress theme “X Blog” and I’m trying to figure out how to add this to that theme. everything I try keeps giving me errors. not sure why the theme won’t work with this. any help would be appreciated. thanks
Adam
This is a really useful tutorial, thanks. I used the genesis code example with success!
My one issue was that simply copying and pasting the code from this site caused an encoding error for where the ellipses go in the numbered pagination. So on the site it displayed a diamond/question mark character instead of the ellipsis. I ended up using the HTML Entity (decimal) ellipsis: … instead which fixed this error. This only occurred on one of the two sites implemented this code on probably due to differences in meta charset or something.
Ilya
Greetings from 2018! I have something cool for you, WordPress core the_posts_pagination() function.
jagadeesh
i have added the code but displaying at the top of website
Sijo
Pagination not working after page2. It’s showing 404 page when click 3 ,4 etc… I have used the same code above. How can i resolve this ?
Jean Braithwaite
I am using your manual method for pagination, and you say “add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template”.
The site is a regular website along with a blog which uses a custom post type.
It worked well on my archive.php page, but I would also like to use it on my blog page, which is a page template, page-blog.php. I can’t get it to work there at all. Why is that? Is there something I can do to get it working?
ziru
hello, I added to some templates and my wordpress couldn’t work anymore, not even login in and my homepage turn to a blank page and seems the whole website break down, what can I do?
Turab
Love u for this. U’re a lifesaver.
Subroto
Thank you very much for this post.
Ingy Anees
This is working fine with me in custom post type but can’t get it to work with search results .. nothing is shown at all. and advice ?
souno
Very nice article and i have a question.
How to show total number of pages at last? In your demo it shows “9”
Thank You!
renee
awesome code – worked like a charm! thank you for sharing it
Azamat
How can I add pagination to the custom taxonomy terms list?
Andy
Like Rajath I had a few problems with the pagination not rendering well on mobiles. In my case the lines overlapped. I resolved this by adding a line height to the CSS:
line-height: 2.5em;
mostafa
Hi, I ‘ve used this code for my theme (without wp-nav plugin) ,it works other pages except in front page .what is exactly the problem?
Rajath
Hi i`m using this pagination in my theme and it works fine in all pages and categories except in the pages where i`m using custom wp_query. I`ve read that you are using a code similar to the one in genesis framework and i`ve used wp_reset_query() but it isn`t working. Thanks in advance for the help.
anuj sharma
hi
i m using your given code and paste in function .php and also add css in style.css but this shows pagination design but its not working
JM
Hello! First off, I want to thank you for posting this. I know that this post is now pretty old, but it is still very useful!
The pagination displays and functions fine for the most part; but the first and last page links are missing for me. It does not matter which page I am on (first, second, third, etc.), no first page or last page links show up. Any ideas on how I can fix this?
Thanks in advance for any help!
Syed Hamza
Numeric Pagination shows only on PC but doesn’t show on mobile. I want to show this pagination on both versions.
How I can fix it?
JeffD
Thank you so much for the excellent tutorial. I want to use the non-plugin solution (the php script), but with no truncation/ellipses for page links (instead of 1…2 3 4 5 6…10, I want to just show all pages all the time – 1 2 3 4 5 6 7 8 9 10). How can I modify the script to do this? Should be easy for you experts but not for me! Thank you in advance for any helps!
Nelson
This code is not working for me, are there any pointers
Youssef
Hi I want return default wp pagination in my theme” freshlife by theme junkie I don’t Like the numeric pagination because it show the total posts in my website . please wpbeginne help
Bilal
i want to paginate my products how can i do it
Rajath
Hi, NIce tutorial and your website have helped me in many issues while developing my own theme. I have opted for the manual pagination shown here instead of plugin. But the pagination is not responsive and looks bad when the screen size is reduced. How to make it responsive or are there any other alternatives(no plugins please).I`m not going to publish this theme so i`m building it just to suit my need…
WPBeginner Support
Look at your WordPress theme’s stylesheet. Study how your theme handles responsiveness. Some themes use media queries to detect screen width and then adjust different elements accordingly. Some themes use relative widths to make sure that all elements inside their design layout are responsive to the screen width.
Admin
Rajath
I’m developing the theme. I’m unable to make the pagination responsive. So I just removed the padding around the links which make them to look like a button. Instead I left them like numbers which works fine in small screens too. Thank You for the reply.
javad
hi
i used first code in function but WP language changed to unreadable words why????
Gabriel Tellez
Thanks man, is great.
James
I’m trying to remove the pagination from my homepage found below each summary post, to me it doesn’t look great, is there a way to do this.
WPBeginner Support
Please contact your WordPress theme developer. They will be able to guide you better.
Admin
Aryan
Actually i am new to wordpress but i know php good……i want to add a pagination from custom table in data base……
Fasih
the numbered pagination without the plugin is working fine on localhost but when i upload the files i cant see anything but when i check the inspect element, the only thing i found was an empty div containing the classes but with nothing inside it. i have uploaded all the files correctly and double checked but not successful. please guide me
Abraham
Cool!
Marco Riesco
Excelent!! thanx
Moustafa
This script does not work in the new WordPress 4.3.1
omdat bij de oude versie heeft die script wel gewerkt en nu niet meer
Pleas help…
Tom
You really helpped me. Thanks !
Sam
Thanks very helpful
lucky cabarlo
how can i adjust the numbers to show in the custom numeric pagination
spongie
how do you limit the page number to say up to 2 only then show ellipsis?
krishma
can i use this plugin for custom post type
Astra
Of course mate. You just need to put this code into your page-custom.php
Med
Hello,
I found this very useful and I placed it to my new site. The problem is that it works perfect on the first page of the category, and after clicking on the “Next” link the url changes to /page/2/ but the highlighted page number is aways “1” and the content is always the first 10 articles (always in the first page).
I think there is something missing in my query:
<a href="”>
‘aligncenter’));
} else {
echo ”;
}
?>
Preeti Bhandari
how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….
Luis Eduardo Braschi
Because “the goal is to replace the default Older and Newer pagination links at the bottom of archive pages” – and this is what “your” function does – “with easy to navigate page numbers.”.
Tony
Hi how do you get just the next and previous links only. thanks.
Barry
How can i use the wpbeginner_numeric_posts_nav(); for my Custom Post type?
I have replaced global $wp_query for
$args = array(
‘post_type’ => ‘my-cpt’,
‘meta_key’=>’cpt_detail’,
‘orderby’=>’meta_value’,
‘order’ => ‘ASC’,
‘paged’ => $paged
);
$cpt_query = new WP_Query($args);
and replaced $wp_query reference with $cpt_query but it doesn’t work
igloobob
Hi, did you ever figure this out please? I’m trying to get this working myself and struggling. Would appreciate your help very much if you got it working…
Ashley Michèlle
Using the ‘wpbeginner_numeric_posts_nav’ method, how would one change the navigation brackets? I’m not a huge fan of the ‘»’.
Thanks!
James George Dunn
Hello Ashley,
You can set a value in the brackets of get_previous_posts_link() and get_next_posts_link(). For example, get_next_posts_link(‘Next Post’) will show “Next Post” instead of the default “Next Page »”.