Change class=”page-numbers” in pagination

The paginate_links() function, located in wp-includes/general-template.php, doesn’t allow for certain parts of the HTML (such as the page-numbers class) to be customized.

A simple string replacement will not work due to the way that the classes are generated, as highlighted in this excerpt of code from paginate_links():

    $page_links[] = '<a class="prev page-numbers" href="' . esc_url( apply_filters( 'paginate_links', $link ) ) . '">' . $args['prev_text'] . '</a>';
endif;
for ( $n = 1; $n <= $total; $n++ ) :
    if ( $n == $current ) :
        $page_links[] = "<span class="page-numbers current">" . $args['before_page_number'] . number_format_i18n( $n ) . $args['after_page_number'] . "</span>";

Here is an updated version of your custom_pagination() function, which uses DOMXpath to to find instances elements with the page-numbers class, then a string replacement is done to change the class to page-link. For better compatibility with Bootstrap, the current class is also replaced with active. Finally, class="mynewclass" is added to the <li> which contains the current item.

function wpse247219_custom_pagination() {
    global $wp_query;
    $big = 999999999; // need an unlikely integer
    $pages = paginate_links( array(
        '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,
        'prev_next' => false,
        'type'  => 'array',
        'prev_next'   => true,
        'prev_text'    => __( '«', 'text-domain' ),
        'next_text'    => __( '»', 'text-domain'),
    ) );
    $output="";

    if ( is_array( $pages ) ) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var( 'paged' );

        $output .=  '<ul class="pagination">';
        foreach ( $pages as $page ) {
            $output .= "<li>$page</li>";
        }
        $output .= '</ul>';

        // Create an instance of DOMDocument 
        $dom = new \DOMDocument();

        // Populate $dom with $output, making sure to handle UTF-8, otherwise
        // problems will occur with UTF-8 characters.
        $dom->loadHTML( mb_convert_encoding( $output, 'HTML-ENTITIES', 'UTF-8' ) );

        // Create an instance of DOMXpath and all elements with the class 'page-numbers' 
        $xpath = new \DOMXpath( $dom );

        // http://stackoverflow.com/a/26126336/3059883
        $page_numbers = $xpath->query( "//*[contains(concat(' ', normalize-space(@class), ' '), ' page-numbers ')]" );

        // Iterate over the $page_numbers node...
        foreach ( $page_numbers as $page_numbers_item ) {

            // Add class="mynewclass" to the <li> when its child contains the current item.
            $page_numbers_item_classes = explode( ' ', $page_numbers_item->attributes->item(0)->value );
            if ( in_array( 'current', $page_numbers_item_classes ) ) {          
                $list_item_attr_class = $dom->createAttribute( 'class' );
                $list_item_attr_class->value="mynewclass";
                $page_numbers_item->parentNode->appendChild( $list_item_attr_class );
            }

            // Replace the class 'current' with 'active'
            $page_numbers_item->attributes->item(0)->value = str_replace( 
                            'current',
                            'active',
                            $page_numbers_item->attributes->item(0)->value );

            // Replace the class 'page-numbers' with 'page-link'
            $page_numbers_item->attributes->item(0)->value = str_replace( 
                            'page-numbers',
                            'page-link',
                            $page_numbers_item->attributes->item(0)->value );
        }

        // Save the updated HTML and output it.
        $output = $dom->saveHTML();
    }

    return $output;
}

Usage:

echo wpse247219_custom_pagination();

Generated HTML:

<ul class="pagination">
    <li class="mynewclass"><span class="page-link active">1</span></li>
    <li><a class="page-link" href="http://localhost/page/2/">2</a></li>
    <li><a class="page-link" href="http://localhost/page/3/">3</a></li>
    <li><span class="page-link dots">…</span></li>
    <li><a class="page-link" href="http://localhost/page/5/">5</a></li>
    <li><a class="next page-link" href="http://localhost/page/2/">»</a></li>
</ul>

Leave a Comment