Manually Add Numeric Pagination In WordPress Themes-Pak Coders

Hey
This is Shaib Abdul. Today I am sharing with you How to Manually Add Numeric Pagination In 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.

function shaib_numeric_pagination() {
 
    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><div class="nav-dots" >… </div></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><div class="nav-dots" >…</div></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() );
  
  /*If you do not want to display the Jump To input then only remove this start*/
    echo '<li>'; 
    echo '
      <form class="shaib-page-nav-form" action="'.__($_SERVER['REQUEST_URI']).' " method="get">
        <label for="sortby" class="shaib-hidden">'.__('Go to', 'shaib-pagination').'</label>
        <input class="shaib-input-number" type="text" placeholder="Jump To" size="6" name="paged" />
        <input class="shaib-button" value="Go" type="submit" > 
      </form>';

    echo '</li>';
  /*end of Jump To*/  
echo '</ul></div>' . "\n";
}

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.

shaib_numeric_pagination();

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 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.7rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

.nav-dots{
	text-decoration: bold;
	color:#6FB7E9;
	font-size: 20px;
	font-weight: bold;
	display: inline;
}

/*styling of jump to input*/
.shaib-hidden {
  display: none;
  visibility: hidden;
}

.shaib-page-nav-form {

  margin-left: 0px;
  display: inline;
}

.shaib-page-nav-form input[type="text"] {
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 12px;
  padding: 0.7rem;
  width: 100px;
  
}
.shaib-page-nav-form input[type="submit"] {
  color: #fff;
  border-radius: 3px;
  padding: 0.7rem;
  width: 50px;
  border: 1px solid #6FB7E9;
  background-color: #6FB7E9;
}

.shaib-page-nav-form input[type="submit"]:hover {
  color: #fff;
  background-color: #3C8DC5;
  border: 1px solid #3C8DC5;
}

/*end of jump to input*/

Screen Short of Numeric Pagination: