How to Add WordPress Pagination Without Plugin

Yesterday one of our client ask to add a pagination feature in Woo Product Table Pro plugin. Today we’ve added the feature in our plugin. After that, I thought to write a step by step article for beginner in WordPress on how to add WordPress Pagination without plugin. So here it is.

Add the following lines into your functions.php file in your themes. This will add a numeric pagination to your page & post.

function ca_pagination() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    $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 >= 5 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    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 */
    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' );
    }
 
    /** Link to current page*/
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
    }
 
    /** Link to last page,*/
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>…</li>' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li>%s</li>' . "\n", get_next_posts_link() );
 
    echo '</ul></div>' . "\n";
 
}

Use a CSS to to style it dynamically. Paste the following code into your css file.

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

If you want to add this pagination to your archive pages or any other just add the following code there.

<?ca_pagination()); ?>

[UltraAddons_Template id=’8543′]

I hope this will help you add WordPress Pagination Without Plugin to your WordPress themes. If you like this post you may also like how to add Metabox on WordPress.