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

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

  3. anuj sharma says:

    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

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

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

  6. Nelson says:

    This code is not working for me, are there any pointers

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

  8. Bilal says:

    i want to paginate my products how can i do it

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

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

  10. javad says:

    i used first code in function but WP language changed to unreadable words why????

  11. Gabriel Tellez says:

    Thanks man, is great.

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

    • WPBeginner Support says:

      Please contact your WordPress theme developer. They will be able to guide you better.

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

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

  15. Abraham says:


  16. Marco Riesco says:

    Excelent!! thanx

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

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.