How to add numeric pagination in your WordPress theme

WordPress navigation is cool but customization is needed to achieve good results. Well, frankly I prefer to click more on buttons rather than a plain link. So I think it would be better to have page numbers with buttons to navigate easily among the WordPress pages. In this post, I will show you, how to add numeric pagination in your WordPress theme with and without using a plugin.

Pagination is very simple and common visage characteristic of every WordPress site which is essential for SEO too, because it helps in maintaining the bounce rates of your site.

In some themes pagination is preloaded while in some themes they are not. Themes like Sparkling, Vantage, etc  comes with in-built pagination feature. If you do not have this function in your WordPress theme and wish to add, you are at the right place.

Also read : 30+ Best free SEO friendly WordPress themes.

Let’s begin the post with how to enable default WordPress pagination on your website because it is the basic and easy way to display the default navigation.

Default WordPress pagination

Do you know ? WordPress itself offers to paginate the posts on home, category, author, or any other archive page. We can use that too by enabling it in your Dashboard settings.

If you want to enable default WordPress pagination, go to >> WordPress dashboard >> Settings >> Reading settings. There you can set the number of posts to be displayed on each page. After showing the desired number of posts it will display page navigation links.



See the screenshot which is given above. You can easily spot the same thing under your “reading settings”. Don’t forget to set the number of posts to be displayed on the front page (or any other archive page) otherwise, it wouldn’t work. After saving changes, at the end of the post you’ll find the default page navigation of WordPress showing as “older posts” and “newer posts”. In this way, you can limit the number of posts on your pages.

How to add numeric pagination in your WordPress theme without a plugin ?

I don’t know about others but I prefer not to install plugins and save my time and speed by coding it. By the way, a custom code works faster than the plugin. Frankly speaking, I hate installing plugins for small customizations. Most of the elements on my website are custom coded.

Similarly, I prefer to add pagination in WordPress using a simple PHP and CSS strings. I also recommend my readers to go for the code and not to use a plugin (not for absolute beginners).

STEP 1 (declaring the pagination function)

The code given below will add the page numbers at the end of the archive pages. So you guys have to copy the code and paste it into your functions.php file. I found this code on WPBeginner and modified it a little. Please remember to paste it before the closing of your php tag (?>).

/*How to add numeric pagination in your WordPress theme*/

function wordpress_numeric_post_nav() {
    if( is_singular() )
    global $wp_query;
    /* Stop the code if there is only a single page 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 into 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";
    /*Display Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
    /*Display Link to first page*/
    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 */
    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";

Adding this code you’ve enabled the numeric page navigation on your WordPress theme. This function will create numerical navigation buttons below your archive pages. But, without writing some CSS this would not look cool.

So refer the step 2 and add the CSS codes to your Pagination.

STEP 2 (Styling the pagination using CSS)

Let’s add some CSS styles to this page navigation so that it looks fantastic to your readers. You can use this customized CSS code given below. Paste this code into your style.css file in the last line. This will create colorful buttons in your page navigation or WordPress pagination.

.navigation li a,
.navigation li.disabled {
    color: #fff !important;
   padding:8px 15px;
    background-color: #1c1c1c;
    cursor: pointer;
text-transform: uppercase;
font-weight: bold;

.navigation li {
    display: inline-block;
    margin: 5px;
.navigation li a:hover{
 background-color: #0091ea;
    color: #fff!important;
.navigation a{
 background-color: #0091ea;
    color: #fff!important;

If you have any doubts regarding the code please ask in the comment.


The steps 1 & 2 are for creating and designing your WordPress pagination buttons. Now step 3 will show you how will you display your animated pagination buttons on the archive pages like Search results page, category page, post loop page. Now you have to use the code given below.

/*Show page numbers*/

<?php wordpress_numeric_post_nav(); ?>

Paste the above code in your archive pages like archive.php, index.php, search results.php, category.php, etc (or wherever you like to display pagination). You cannot directly add this to the desired php files. You’ll have to paste the code where the content of your page ends. you can refer to the screenshot given below.

php filke

That’s all you’ve done with adding the numerical pagination to your WordPress theme using functions.php method. Now let’s see how to do it via WordPress plugins.

Different themes has different frameworks. So I’m not going to recommend this method to WordPress beginners. Prefer this method only if you have basic knowledge about PHP and CSS3. Beginners should go for the one which is mentioned below.

How to add numeric pagination in your WordPress theme using a plugin ?

There are some cool pagination plugins which help the Blogger to create a responsive CSS buttons at the end of the post loop on different types of archive pages like Search results, Category , the front page having latest posts, etc. This plugin will definitely help you in : How to add numeric pagination in your WordPress theme.

As I’d told you before in my previous posts that the plugins are the primary solutions of the majority of the problems and requirements arises on the WordPress. But having too many plugins will increase the HTTP requests and slow down your website speed. But there are some of the plugins which are optimized and doesn’t effect much on your website loading speed. Some of them are-

Easy WP Page Navigation

It is a simple pagination plugin which will not slow down your page loading time or decrease your website speed. This plugin is easy to use and indeed customizable.

You do not require a single knowledge about the coding for using this plugin. There are many styles of showing pagination in your loops and you can easily select the one for your blog in plugin settings.


You need not to write a single code, this plugin will automatically do this job for you.

[su_button url=”” target=”blank” style=”flat” background=”#0091ea” color=”#ffffff” size=”4″ radius=”5″ icon=”icon: book” icon_color=”#ffffff” text_shadow=”0px 0px 0px #000000″]Details and Download[/su_button]

Main Features

  1. Multiple styles of pagination.
  2. Direct links for first and last page.
  3. Indeed customizable.
  4. Limit the number of posts.
  5. Custom Taxonomies option for better customization.

Prime Strategy Page Navi

WordPress Pagination

This is another great pagination plugin on WordPress. This plugin adds the functions to display page navigation (pagination) on homepage and archive pages like search results, category page, author page, etc. You can apply lots of parameters and customize the pagination timelessly using this plugin.

[su_button url=”” target=”blank” style=”flat” background=”#0091ea” color=”#ffffff” size=”4″ radius=”5″ icon=”icon: book” icon_color=”#ffffff” text_shadow=”0px 0px 0px #000000″]Details and Download[/su_button]

Main Features

  1. SEO and user friendly.
  2. Display total number of pages.
  3. Limit the number of posts.
  4. Custom parameters option for better customization of results

You guys may also like,

These are the 2 best plugins for Beginners. Using this plugins you can add WordPress page navigation on your WordPress site without writing a single code.

If you want, you can also use these free WordPress themes which have an inbuilt function of the numeric pagination. You can use these themes as a default and enjoy the pagination features without any plugin or code.

If the post was useful to you and helped you in adding pagination in your WordPress theme then do not forget to share this post with your friends on Facebook or twitter.

Have any question in your mind, please feel free and type your questions in the comment. Our team will love to help you.

How to add numeric pagination in your WordPress theme.


  1. Thanks for sharing this, works great!

    PS: In STEP 3 you are calling the ‘wordpress_numeric_post_nav()’ function, whereas the function defined in STEP 1 is ‘wordpress_numeric_posts_nav()’. Just a little typo, which results in an error calling an undefined function.

  2. Thank you fоr tһe auspicious writeup. Ιt if truth be tolⅾ
    was once a enjoyment account it. Look complex to more brought
    agreeable frⲟm you! Hoѡever, hοw can we ƅе in contact?


Please enter your comment!
Please enter your name here