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.
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 »”.
AmirMasoud
how can i change “Next Page” & “Previous page” text?
TimParkerRD
If you’re using the wpbeginner_numeric_posts_nav function, you can pass custom text to the get_next_posts_links() and get_previous_posts_link(), like so:
get_previous_posts_link(“Go Back”);
Daniel Ortiz
since Genesis Framework is not an open-source framework, are we allowed to use this code, commercially or not?( and are you allowed to distribute it?)
mr anon
thanks a lot
gosukiwi
Awesome, it works like a charm, I did some changes to fix my code though but the code is nice and well organized
Agarwalls
Thanks, Very helpful for me.
SJ
echo paginate_links( $args );
Why this one doesn’t do the job? I’m just curious
SJ
Why this one doesn’t do the job? I’m just curious
Baba agba
I tried it and its not working for me. Can you paste a simple example of your “paginated posts” code here
Nick
Has anyone had any luck getting this working with a custom WP_Query? It works perfect with the standard loop, but does not show up with a custom query. Any help would be great.
Thanks.
Marx
Have you tried the custom query examples noted from the codex?
http://codex.wordpress.org/Function_Reference/paginate_links
Hope that helps.
SJ
Well this one doesn’t work for me
Don’t know why
Mufaddal
Thanks so much, I tried your solution it worked for me.
Timberland
You have 2 options to do that, First is to use query_posts instead of Wp_Query
or the Second is to name your custom query “wp_query” as $wp_query = new WP_Query( $args );
important part in both approaches is to pass the ‘paged’ => $paged argument in your query otherwise won’t work,
//////////////////////////////////////With Wp_Query
$args = array( ‘cat’ => 3, ‘paged’ => $paged );
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) :
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
get_template_part( ‘content’, get_post_format() ); }
else :
echo “No post to show”;
endif;
wpbeginner_numeric_posts_nav();
wp_reset_postdata(); }
//////////////////////////////////////With Query_Posts
$args = array( ‘cat’ => 3, ‘paged’ => $paged );
query_posts( $args );
if ( have_posts() ) :
while ( have_posts() ) {
the_post();
get_template_part( ‘content’, get_post_format() ); }
else :
echo “No post to show”;
endif;
wpbeginner_numeric_posts_nav();
wp_reset_query(); }
[Hope that helps]
DavidCWebs
Try this native WP function: http://codex.wordpress.org/Function_Reference/paginate_links There’s an example on that codex page showing how to use it with WP_Query.
Hope this helps
Tim
Do this pagination have page number limits or does it automatically detect when more pages are required? Works really nicely
Akash Funde
Thanks for sharing this it helps a lot
Thanks you so Much
adrian
I’ve been using this successful for search results, archives, categories.. but it’s not working for tags. I suspect it could be a permalink issue. The first page works fine, but subsequent pages return 404s. Should this work for tags by default.?
Bubu
search results, archives are ok but in categories same error here. the first page is ok, second page return with 404.
need some help to solve this issue thx
Caroline
Thanks for this, it came in real handy making pagination Foundation framework-ready.
Hiro
I added this to my site and it shows up properly but doesn’t display the proper content on page 2. Tried it both manually and with the plugin. Both times, the pagnation links appear, and when i click to go to page 2, the url changes to page 2 but the content on the page shows only content from page 1 (or index). Please advise
Steve
I am new to Genesis but you say if we are using it that the function is already in there but when I tried adding the php to the hooked area, nothing would display so… I added the above code to my genesis functions.php and added the php call to my hooked area and now the pagination displays but it does not work. When I click the 2nd page, it just reloads the current page.
WPBeginner Support
please contact genesis support
Admin
Tyler
Does this work for wordpress.com sites? I have this blog that is set up via wordpress.com, not the installed version and I need to add pagination for the blog. Is there a way to do that? Thanks for any future help!
WPBeginner Support
No this tutorial is mean for Self hosted WordPress.org sites. As a WordPress.com user you can not directly edit themes.
Admin
Crear Cuenta Outlook
thank you so much
Rajavenkateshwaran
Am facing issues when i use the function within the custom page template. I created a custom page template to loop 4 of the posts, this function works well in Homepage and it doesnshow any sign of navigation links in page template.
Best Regards,
Raja
WPBeginner Support
If you are using a custom WP_Query then please check pagination parameters.
Admin
aklavya
thanx ……………… this code is very helpful
Dejan
Thank you for this code of pagination it is working with WP 3.7.1
Eli Overbey
Any thoughts on how to get archived pagination on Category Blog Page? (in Genesis)
I was able to create a page entitled ‘counseling-blog’, so now we have a Category Blog page at
But here’s the problem… No pagination. The /blog/ has the pagination from Genesis WP. All we have on that new Category Page page is:
”
There is no rel=”next” or rel=”prev”… Any thoughts on how to add next and prev to the Category Blog Page?
I thought the page would add those tags because the template is set as blog.
Big V
Nice post, but I’m having issues with /page/2 not working in my custom theme. Any advice?
Jeremy
WordPress has a core function for doing this.
http://codex.wordpress.org/Function_Reference/paginate_links
Gohar ul Islam
I am searching code (or any kind of help) which uses paginate_links in Wp_query. Do u have any code like this?
Dmitry
Thanks!
Mzer Michael Terungwa
I tried to implement this pagination on the single.php page but it did not show up. Is this only for theme’s index.php, archive.php, category.php, and any other archive page template?
Michael
It appears that Multiple Posts Pagination is quite different from single post pagination and would require different template tags to create them.
WPBeginner Support
Yes this code is only for index and archive pages.
Admin
Felipe Gangrel
Awesome. Thanks a lot!!!
Talha
Great code, thanks bro
Shaghayeggh
Thank you very very much
Marko
Hi,
thanks for great tutorial!
I had to add ul in front of every li in style.css, otherwise this worked perfectly.
(.navigation ul li a,) etc…
elvinson
i have installed wp-pagenavi plugin, but it was not showing in archives , so i have used your coding manually it is working well. Thanks.
Don
what about pagination for a single post that contains numerous pages .. i.e.- this is about A SINGLE POST – that was too long and had to be divided into multiple pages ! … the wp codex for this type of single post pagination is done with the command ( ) … unfortunately none of the plugins out there provides a good solution for this type of pagination ….. or they simple avoid it all together … the wp-pagenavi mentionned it very briefly…. but does not work for single post pagination on 95 % of the wp themes out there….
if there is such a plugin that provides a good alternative for wp_link_pages with good styling and other options for single post pagination …. please share !!!
Editorial Staff
Genesis theme has that option. We are using that on our site http://list25.com/
Admin
Chinmoy Paul
Thanks for sharing this. I will use this in my next project.
Robert Smith
Thanks for this guys! Been looking for a simple solution like this all evening and this was gold!!
Keep up the great work on your site, as it is a regular resource of mine
Thanks,
Rob
Arilton Freitas
To me, the best way to include numeric pagination in WordPress is use the paginate_links() function. Simple and core-based.
http://codex.wordpress.org/Function_Reference/paginate_links
Editorial Staff
Didn’t even know that existed. Thanks for pointing this out.
-Syed
Admin
Mattia
Indeed this is awesome, but… The pagination always appear, also if not needed… Ho do you prevent this?
If mu limit is 10 posts per page, but I only have written 5, the paginations appears and sends me to an empty “page 2″… ;(
Mattia
I checked another of my sites and this error doesn’t appear. In this late site I am building, strangely pagination appears also if not needed! Does someone know which could be the cause? Many thanks!
Jacob
WordPress already has this baked in with a function called paginate_links (http://codex.wordpress.org/Function_Reference/paginate_links).
Upendra Shrestha
Hi, Previously I used wp pagenavi plugin in genesis framework. But it didn’t work with the framework. After adding the code “”, it just worked. I didn’t realize that I had to add this code.
Thanks.
Alex Sancho
and what about the Wordpress function paginate_links? http://codex.wordpress.org/Function_Reference/paginate_links
Connie
for those who want to style differently but are not CSS-savy, there are at least 2 additional plugins available:
WP Visual Pagination, http://wordpress.org/extend/plugins/wp-visualpagination/
or
WP PageNavi Style , http://wordpress.org/extend/plugins/wp-pagenavi-style/
Cheers,
Connie
Editorial Staff
Thanks for letting us know Connie.
Admin
Azim
Isn’t it going to be a heavy SQL query, esp. on blogs with lots and lots of posts? I had to get rid of such pagination on one of my projects (containing over 10K posts), because hoster claimed it consumed too much of a CPU and SQL resources. Basically, what it did is selected ALL posts (over 10K, remember?) and then just divided them into multiple pages with 20 (or whatever you specify in admin) posts per page…
Editorial Staff
WordPress is dividing the posts in those pages to begin with using the WP_Query posts_per_page parameter. All this query is doing is looking at those pages and creating a numeric display. I’m sure there was more going on that your host didn’t bother explaining.
-Syed
Admin