Add the following code to the theme’s functions.php file
function dcs_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="dcsnavigation"><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"; }
Call the following function inside home.php file or whatever file you are using for blog list page
<div class="pagination-blogs"> <?php dcs_numeric_posts_nav(); ?> </div>
Use the following styles or write your own
.dcsnavigation li a, .dcsnavigation li a:hover, .dcsnavigation li.active a, .dcsnavigation li.disabled { color: #fff; text-decoration:none; } .dcsnavigation li { display: inline; } .dcsnavigation li a, .dcsnavigation li a:hover, .dcsnavigation li.active a, .dcsnavigation li.disabled { background-color: #fdfdfd; border-radius: 3px; cursor: pointer; padding: 6px 10px !important; color: #3386ec; border: 1px solid #3386ec; } .dcsnavigation li a:hover, .dcsnavigation li.active a { background-color: #3386ec; color: #fff; }