Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Add Numeric Pagination in Your WordPress Theme

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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() )

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages <= 1 )

	$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 a,
.navigation li.disabled {
	color: #fff;

.navigation li {
	display: inline;

.navigation li a,
.navigation li a:hover,
.navigation a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;

.navigation li a:hover,
.navigation 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;
	border: 1px solid #B2D1E5;
	padding: 5px 5px;
	margin: 2px;

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #E9F2F9;

.wp-pagenavi span.current {
	font-weight: bold;

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.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Sam says:

    Thanks very helpful

  2. lucky cabarlo says:

    how can i adjust the numbers to show in the custom numeric pagination

  3. spongie says:

    how do you limit the page number to say up to 2 only then show ellipsis?

  4. krishma says:

    can i use this plugin for custom post type

  5. Med says:


    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="”>


    } else {

    echo ”;



  6. Preeti Bhandari says:

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

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

  8. Tony says:

    Hi how do you get just the next and previous links only. thanks.

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



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

  10. Ashley Michèlle says:

    Using the ‘wpbeginner_numeric_posts_nav’ method, how would one change the navigation brackets? I’m not a huge fan of the ‘»’.


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

  11. AmirMasoud says:

    how can i change “Next Page” & “Previous page” text?

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

  12. Daniel Ortiz says:

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

  13. mr anon says:

    thanks a lot

  14. gosukiwi says:

    Awesome, it works like a charm, I did some changes to fix my code though but the code is nice and well organized :)

  15. Agarwalls says:

    Thanks, Very helpful for me.

  16. SJ says:

    echo paginate_links( $args );
    Why this one doesn’t do the job? I’m just curious

  17. SJ says:

    Why this one doesn’t do the job? I’m just curious

  18. Baba agba says:

    I tried it and its not working for me. Can you paste a simple example of your “paginated posts” code here

  19. Nick says:

    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.


    • Marx says:

      Have you tried the custom query examples noted from the codex?

      Hope that helps.

    • Timberland says:

      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() ) {
      get_template_part( ‘content’, get_post_format() ); }
      else :
      echo “No post to show”;
      wp_reset_postdata(); }

      //////////////////////////////////////With Query_Posts
      $args = array( ‘cat’ => 3, ‘paged’ => $paged );
      query_posts( $args );
      if ( have_posts() ) :
      while ( have_posts() ) {
      get_template_part( ‘content’, get_post_format() ); }
      else :
      echo “No post to show”;
      wp_reset_query(); }

      [Hope that helps]

    • DavidCWebs says:

      Try this native WP function: There’s an example on that codex page showing how to use it with WP_Query.
      Hope this helps

  20. Tim says:

    Do this pagination have page number limits or does it automatically detect when more pages are required? Works really nicely :)

  21. Akash Funde says:

    Thanks for sharing this it helps a lot
    Thanks you so Much :)

  22. adrian says:

    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 says:

      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 :)

  23. Caroline says:

    Thanks for this, it came in real handy making pagination Foundation framework-ready. :)

  24. Hiro says:

    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

  25. Steve says:

    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.

  26. Tyler says:

    Does this work for sites? I have this blog that is set up via, 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 says:

      No this tutorial is mean for Self hosted sites. As a user you can not directly edit themes.

  27. Crear Cuenta Outlook says:

    thank you so much

  28. Rajavenkateshwaran says:

    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,

  29. aklavya says:

    thanx ……………… this code is very helpful

  30. Dejan says:

    Thank you for this code of pagination it is working with WP 3.7.1 :)

  31. Eli Overbey says:

    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.

  32. Big V says:

    Nice post, but I’m having issues with /page/2 not working in my custom theme. Any advice?

  33. Jeremy says:

    WordPress has a core function for doing this.

    • Gohar ul Islam says:

      I am searching code (or any kind of help) which uses paginate_links in Wp_query. Do u have any code like this?

  34. Dmitry says:


  35. Mzer Michael Terungwa says:

    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 says:

      It appears that Multiple Posts Pagination is quite different from single post pagination and would require different template tags to create them.

    • WPBeginner Support says:

      Yes this code is only for index and archive pages.

  36. Felipe Gangrel says:

    Awesome. Thanks a lot!!!

  37. Talha says:

    Great code, thanks bro

  38. Shaghayeggh says:

    Thank you very very much :)

  39. Marko says:


    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…

  40. elvinson says:

    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.

  41. Don says:

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

  42. Chinmoy Paul says:

    Thanks for sharing this. I will use this in my next project.

  43. Robert Smith says:

    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 :-)


  44. Arilton Freitas says:

    To me, the best way to include numeric pagination in WordPress is use the paginate_links() function. Simple and core-based.

    • Editorial Staff says:

      Didn’t even know that existed. Thanks for pointing this out.


    • Mattia says:

      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 says:

        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!

  45. Jacob says:

    WordPress already has this baked in with a function called paginate_links (

  46. Upendra Shrestha says:

    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.

  47. Alex Sancho says:

    and what about the WordPress function paginate_links?

  48. Connie says:

    for those who want to style differently but are not CSS-savy, there are at least 2 additional plugins available:

    WP Visual Pagination,


    WP PageNavi Style ,



  49. Azim says:

    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 says:

      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.


Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.