I'm using paginate_links.
Right now i have:
Page 1 of 6 1, 2, 3, 4, 5, ... »
Page 3 of 6 « 1, 2, 3, 4, 5, ... »
Page 6 of 6 « ..., 2, 3, 4, 5, 6
<div class="pagination">
<span class="pages">
<?php if( empty( $var ) ) {
global $wp_query;
if( !isset( $wp_query->max_num_pages ) )
return;
$pages = $wp_query->max_num_pages;
}
else {
global $$var;
if( !is_a( $$var, 'WP_Query' ) )
return;
if( !isset( $$var->max_num_pages ) || !isset( $$var ) )
return;
$pages = absint( $$var->max_num_pages );
}
if( $pages < 1 )
return;
$page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
echo 'Page ' . $page . ' of ' . $pages; ?>
</span>
<?php
global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'mid_size' => 2,
'prev_text' => __('«'),
'next_text' => __('»'),
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
) );
?>
</div>
How can I add "last" and "first" link to achieve the following pagination style?
Page 1 of 20 1, 2, 3, 4, 5, ... » Last »
Page 10 of 20 « First « 10, 11, 12, 13, 14, ... » Last »
Page 20 of 20 « First « ..., 16, 17, 18, 19, 20
Try adding this function to the active theme's functions.php file
function tutsocean_pagination( $range = 5 ) {
global $paged, $wp_query;
if ( !$max_page )
$max_page = $wp_query->max_num_pages;
if ( $max_page > 1 )
if ( !$paged ) $paged = 1;
echo "\n".'<ul class="dcs_pagination">'."\n";
if ( $paged != 1 )
echo '<li class="page-num page-num-first"><a href='.get_pagenum_link(1).'>'.__('« First', "PAGE_LANG").' </a></li>';
echo '<li class="page-num page-num-prev">';
previous_posts_link(' « ');
echo '</li>';
if ( $max_page > $range ) :
if ( $paged < $range ) :
for ( $i = 1; $i <= ($range + 1); $i++ ) {
$class = $i == $paged ? 'current' : '';
echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
}
elseif ( $paged >= ( $max_page - ceil($range/2)) ) :
for ( $i = $max_page - $range; $i <= $max_page; $i++ ){
$class = $i == $paged ? 'current' : '';
echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
}
endif;
elseif ( $paged >= $range && $paged < ( $max_page - ceil($range/2)) ) :
for ( $i = ($paged - ceil($range/2)); $i <= ($paged + ceil($range/2)); $i++ ) {
$class = $i == $paged ? 'current' : '';
echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
}
else :
for ( $i = 1; $i <= $max_page; $i++ ) {
$class = $i == $paged ? 'current' : '';
echo '<li class="page-num"><a class="paged-num-link '.$class.'" href="'.get_pagenum_link($i).'"> '.$i.' </a></li>';
}
endif;
echo '<li class="page-num page-num-next">';
next_posts_link(' » ');
echo '</li>';
if ( $paged != $max_page )
echo '<li class="page-num page-num-last"><a href='.get_pagenum_link($max_page).'> '.__('Last »', "PAGE_LANG").'</a></li>';
echo "\n".'</ul>'."\n";
}
After that, add the following code where you want to show the pagination.
<div class="pagination">
<span class="pages">
<?php if( empty( $var ) ) {
global $wp_query;
if( !isset( $wp_query->max_num_pages ) )
return;
$pages = $wp_query->max_num_pages;
}
else {
global $$var;
if( !is_a( $$var, 'WP_Query' ) )
return;
if( !isset( $$var->max_num_pages ) || !isset( $$var ) )
return;
$pages = absint( $$var->max_num_pages );
}
if( $pages < 1 )
return;
$page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
echo 'Page ' . $page . ' of ' . $pages; ?>
</span>
<?php tutsocean_pagination(); ?>
</div>
A bit of optional CSS. Ignore if you want to add your own CSS/styles
ul.dcs_pagination {list-style: none;display: flex;}
.pagination {
display: flex;
}
ul.dcs_pagination li {
padding: 0px 10px;
}
The best part of this code is you can make changes to Next previous buttons or first last buttons in the function defination of tutsocean_pagination()