Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Numeric Pagination in Your WordPress Theme

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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.

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.

Numeric pagination links on the WPBeginner website

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

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.

How to add numeric pagination in WordPress

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.

The WP-PageNavi WordPress plugin

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.

An example of numeric pagination in WordPress

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.

Customizing the WordPress pagination settings

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.

Changing your WordPress pagination styling

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.’

The WordPress code editor

In the right-hand menu, click on the pagenavi-css.css file.

Then, go ahead and copy all the code in this file.

The WordPress plugin editor

Next, simply go to Appearance » Theme File Editor.

In the right-hand menu, click on your theme’s style.css file.

The WordPress theme editor

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.

Custom numeric pagination in a WordPress theme

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.

Pagination in the Astra WordPress theme

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.

Manually adding numeric pagination in WordPress

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

120 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Kzain says

    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 says

      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

  3. Jiří Vaněk says

    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.

  4. Sujal says

    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() );

    • WPBeginner Support says

      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

  5. Quy says

    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.

  6. Alexandre says

    Awesome article, simple and straight to the point!

    It worked perfectly for me, thanks a lot!!

  7. ModGirl says

    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

  8. Adam says

    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.

  9. Ilya says

    Greetings from 2018! I have something cool for you, WordPress core the_posts_pagination() function.

  10. Sijo says

    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 ?

  11. Jean Braithwaite says

    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?

  12. ziru says

    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?

  13. Ingy Anees says

    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 ?

  14. souno says

    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!

  15. Andy says

    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;

  16. mostafa says

    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?

  17. Rajath says

    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.

  18. anuj sharma says

    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

  19. JM says

    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!

  20. Syed Hamza says

    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 says

      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!

  21. Youssef says

    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

  22. Rajath says

    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 says

      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 says

        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.

  23. James says

    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.

  24. Aryan says

    Actually i am new to wordpress but i know php good……i want to add a pagination from custom table in data base……

  25. Fasih says

    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

  26. Moustafa says

    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…

  27. Med says

    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 ”;

    }

    ?>


  28. Preeti Bhandari says

    how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….

  29. Luis Eduardo Braschi says

    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.”.

  30. Barry says

    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 says

      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…

    • James George Dunn says

      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 »”.

    • TimParkerRD says

      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”);

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.