Pagination adding page-numbers dots when using ‘mid_size’ => 0

The question:

Hey all, I’m attempting to do convert my current pagination:

  • from : Prev 1 2 3 Next
  • to: Page 1 of 2 -->

My current code looks like this:

if( ! function_exists( 'my_pagination' ) ) {
    function my_pagination() {
        global $wp_query;    
        $big = 999999999; // This needs to be an unlikely integer
        $paginate_links = paginate_links( array(
            'base' => str_replace( $big, '%#%', get_pagenum_link($big) ),
            'current' => max( 1, get_query_var('paged') ),
            'total' => $wp_query->max_num_pages,
            'mid_size' => 0,
            'prev_next' => True,            
            'prev_text' => __('<span class="fa fa-long-arrow-left" aria-hidden="true"></span>'),
            'next_text' => __('<span class="fa fa-long-arrow-right" aria-hidden="true"></span>'),
            'type' => 'list'
        ) );
        if ( $paginate_links ) {
            echo '<div class="pagination">';
            echo $paginate_links;
            echo '</div>';
        }
    }
}

I have had NOT much experience at all dealing with pagination in WordPress until now, that is. I thought I’d make it easy on myself and simply change the_size to 0, then just use CSS before and after to add the page of, like so:

.pagination li:first-child:before {
    content: "Page "
}

.pagination li:first-child:after {
    content: " of"
}

But then I notice that WordPress is inserting:

<li><span class="page-numbers dots">…</span></li>

Because of the 'mid_size' => 0, and obviously I could just use li:nth(2) { display: none; } in the CSS. But then another issue is that the last page number is a href which is something I don’t want either, so using all these work around methods just seems like a botched job and rather to do in the codex rather than the CSS. I’ve tried several solutions with no success.

How do I disable the adding of:

  • <span class="page-numbers dots">…</span>?
  • <a href> on the last page number?
  • Or how do you recommend I proceed altering the current array?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Here’s a workaround:

First change the paginate_links() output type to:

'type' => 'array',

Then we can collect the previous, current and next parts from the paginate_links() output.

Here’s a simple example where we target the relevant classes:

$next       = '';
$current    = '';
$prev       = '';
foreach( (array) $paginate_links as $link )
{           
    if( false !== strpos( $link, 'prev ' ) )
        $prev = $link;
    elseif( false !== strpos( $link, ' current' ) )
        $current = $link;       
    elseif( false !== strpos( $link, 'next ' ) )
        $next = $link;
}

Finally we can construct the output as needed:

! empty( $current ) && printf(
    '<div class="pagination">%s %s %s %s %d %s</div>',
    $prev,
    esc_html__( 'Page', 'my-domain' ),
    $current,
    esc_html__( 'of', 'my-domain' ),
    $wp_query->max_num_pages,
    $next
);


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment