Simply add the following code at the end of your functions.php file (or whatever file in your theme where you want to keep it).

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {

function wpex_pagination() {

$prev_arrow = is_rtl() ? '→' : '←';
$next_arrow = is_rtl() ? '←' : '→';

//$total = $wp_query->max_num_pages;
global $wp_query, $blog_query;

if ( $blog_query ) {
$total = $blog_query->max_num_pages;
} else {
$total = $blog_query->max_num_pages;
}

$big = 999999999; // need an unlikely integer
if( $total > 1 ) {
if( !$current_page = get_query_var('page') )
$current_page = 1;
if( get_option('permalink_structure') ) {
$format = 'page/%#%/';
} else {
$format = '&paged=%#%';
}
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => $format,
'current' => max( 1, get_query_var('page') ),
'total' => $total,
'mid_size' => 3,
'type' => 'list',
'prev_text' => $prev_arrow,
'next_text' => $next_arrow,
) );
}
}

}

Add before your wp_query
$paged = (get_query_var('page')) ? get_query_var('page') : 1;

Display pagination
wpex_pagination();

Pagination css
ul.page-numbers {
list-style: none;
margin: 0;
}

.page-numbers:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

ul.page-numbers li {
display: block;
float: left;
margin: 0 4px 4px 0;
text-align: center;
}

.page-numbers a,
.page-numbers span {
line-height: 1.6em;
display: block;
padding: 0 6px;
height: 18px;
line-height: 18px;
font-size: 12px;
text-decoration: none;
font-weight: 400;
cursor: pointer;
border: 1px solid #ddd;
color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
color: #000;
background: #f7f7f7;
text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

Advertisements