You can use below steps to display pagination.
Step 1:- Include the following snippet in your functions.php file :-
function webim_pagination ( $pages="", $range = 4 ) {
$showitems = ($range * 2) + 1;
global $paged;
if( empty( $paged ) ) $paged = 1;
if( $pages == '' ) {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages) {
$pages = 1;
}
}
if(1 != $pages) {
echo "<nav class=\"webim-page-pagination\"><ul class=\"page-numbers wow fadeInRight\"><li class=\"disabled\"><a href=\"#\">" . __('Page ', 'webim') . $paged . __(' of ', 'webim') . $pages . "</a></li>";
if( $paged > 2 && $paged > $range + 1 && $showitems < $pages ) echo "<li><a href="" . get_pagenum_link( 1 ) . "">⇐ " . __('First', 'webim') . "</a></li>";
if( $paged > 1 && $showitems < $pages ) echo "<li><a href="" . get_pagenum_link( $paged - 1 ) . "">← " . __('Previous', 'webim') . "</a></li>";
for ( $i = 1; $i <= $pages; $i++ ) {
if ( 1 != $pages && ( !( $i >= $paged + $range + 1 || $i <= $paged - $range - 1 ) || $pages <= $showitems )) {
echo ( $paged == $i ) ? "<li class=\"active\"><a href=\"#\">" . $i . "</a></li>" : "<li><a href="" . get_pagenum_link( $i ) . "" class=\"inactive\">" . $i . "</a></li>";
}
}
if ( $paged < $pages && $showitems < $pages ) echo "<li><a href=\"" . get_pagenum_link( $paged + 1 ) . "\">" . __('Next', 'webim') . " →</a></li>";
if ( $paged < $pages-1 && $paged + $range - 1 < $pages && $showitems < $pages ) echo "<li><a href="" . get_pagenum_link( $pages ) . "">" . __('Last', 'webim') . " ⇒</a></li>";
echo "</ul></nav>\n";
}
}
Step 2:- Now call our pagination function whereever pagination is required. :-
<?php webim_pagination(); ?>
It is always better to have a function for reusable elements.