How to Add Numeric Pagination in Your WordPress Theme

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.


//Numeric Pagination in Your WordPress Theme

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

}

2) Add style.css

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

}

3) Add index.php, archive.php, category.php, and any other archive page template.

<?php wpbeginner_numeric_posts_nav(); ?>