Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Numeric Pagination in Your WordPress Theme

One of our readers recently asked us how do we add numeric pagination on the WPBeginner blog page. Default WordPress themes and many other themes display pagination links by adding Older posts and Newer Posts links at the bottom of your WordPress archive pages. However, there are many WordPress sites that uses numeric pagination, like WPBeginner. From our experience, numeric pagination is more user friendly, attractive, and SEO friendly. Most advanced WordPress theme frameworks like Genesis comes with a built-in functionality for adding numeric pagination. In this article we will show you how to add numeric pagination in your WordPress theme. The goal is to replace the default Older and Newer pagination links at the bottom of archive pages with easy to navigate page numbers.

Difference between default WordPress navigation and Numeric Pagination

There are two methods to adding numeric pagination in your WordPress theme. The first method is manually adding numeric pagination without relying on a third party plugin. Since this article is in the theme category and intended for new theme designers, we will show the manual method first. The second method is to use an existing third party plugin to add numeric pagination. We would recommend that method for all of our DIY users.

Manually adding Numeric Pagination in Your WordPress Themes

First we will show you how to manually add numeric pagination in your WordPress themes. This will benefit our advanced users, and users who are learning theme development, or want to do this without relying on a third party plugin. Lets get started by adding the following code in your theme’s functions.php file.

Note: This code is derived from Genesis Framework which we use on our site. If you are using Genesis, then you don’t need this code or the plugin.


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

}

At WPBeginner, we use this same code for numeric pagination on our archive pages (for example our blog, or WordPress tutorials category page). What this code does is that it retrieves the number of pages and prepares a bulleted list of numbered links. To add this in your templates, you will have to add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template.

	<?php wpbeginner_numeric_posts_nav(); ?>

Now that we have got our list of numbered pages, we need to style this list. We want to make the list appear in-line block where the active page is highlighted with a different background color. To accomplish that, lets go ahead and add the following in your theme’s style.css 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;
}

There you have it. We have a list of numeric pagination in our theme that looks great.

Manually adding numeric pagination to WordPress themes without a plugin

Adding Numeric Pagination in WordPress using WP-PageNavi

Now let’s take a look at how to add numeric pagination in your WordPress theme by using an existing plugin called WP-PageNavi. First thing you need to do is install and activate WP-PageNavi plugin. After activating the plugin go to Settings » PageNavi to configure the plugin settings.

Configuring WP-PageNavi settings

On the plugin settings page you can replace the default text and numeric pagination settings with your own if you want. However, the default settings should work for most websites.

In the next step, you need to add a template tag in your WordPress Theme. Go to your theme folder and find the lines for older and newer pagination in your archive page templates: index.php, archive.php and any other archive template files. Add the following template tag to replace the old previous_posts_link and next_posts_link tags.

<?php wp_pagenavi(); ?>

Once you have added the wp_pagenavi snippet, this is how the numeric pagination would look like:

Default view of wp-pagenavi's numeric pagination

If you want to change how the colors and style of numeric pagination in wp-pagenavi looks, then you would need to go to Settings » PageNavi. Uncheck the option to use Use pagenavi-css.css and save changes. Now go to Plugins » Editor. From Select plugin to edit drop down menu, select WP-PageNavi and click on the Select button. The editor will load plugin files in the right hand sidebar. Click on pagenavi-css.css to open it in editor and then copy the contents of the file.

Copy the contents of pagenavi-css file

Next, you need to go to Appearance » Editor and paste the contents of pagenavi-css.css into your theme’s style.css file. Now you can modify the color scheme and styling from here. The reason why we copied the contents of plugin’s css to theme’s stylesheet is to prevent loss of style changes should you update the plugin. Here is a slightly modified version of numeric pagination, feel free to use and modify it in your theme.


.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;
}

Here is how it would look like:

Customized PageNavi CSS

As always you should experiment with CSS. The goal should be to match the numeric pagination with look and feel of your website’s colors, so that it blends in nicely and does not look like an oddly placed item.

We hope that this article helped you add and display numeric pagination in your WordPress theme. Which method do you prefer to use? Do you like the numeric pagination or do you prefer the built-in previous/next navigation? Let us know in the comments below.

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.

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

116 CommentsLeave a Reply

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

    • 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

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

  3. Awesome article, simple and straight to the point!

    It worked perfectly for me, thanks a lot!!

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

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

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

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

  8. 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?

  9. 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?

  10. 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 ?

  11. 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!

  12. 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;

  13. 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?

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

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

  16. 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!

  17. 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?

    • 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!

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

  19. 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…

    • 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

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

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

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

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

  23. 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…

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

    }

    ?>


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

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

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

    • 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…

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

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

  28. 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?)

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.