Popular Categories

Custom Numeric Pagination for WordPress Theme

Default WordPress themes display pagination links by adding “Older posts” and “Newer Posts” links at the bottom of your listing pages. However, there are many sites that require 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.

Manual Method:

To add numeric pagination in your WordPress theme by using the manual method. First thing you need to do add the snippet of code to functions.php:

function 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 '' . "\n";
 
}

Once added you will need to add the styling CSS code to your appearance > custom > CSS code:

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

Now add the function to your index/archive files:

Third-Party Plugins:

To add numeric pagination in your WordPress theme by using a 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. Then use the function to install the pagination.


Was this helpful?
Did I missed something? Do you have a question? Get in touch.