0

When using wp_link_pages() to display article pagination, how do I modify the linked class?

I want to use different classes to set the previous/next link style.

Thanks in advance!

Wp_link_pages() parameter:

<?php
wp_link_pages( array(
    'before' => '<div class="page-links">',
    'after'  => '</div>',
    'next_or_number' => 'next',
) );
?>

Html output:

<div class="page-links">
    <a href="http://test.com/xxxxxx/2/" class="post-page-numbers">PREVIOUS</a>
    <a href="http://test.com/xxxxxx/4/" class="post-page-numbers">NEXT</a>
</div>
2
  • If you really must, then there's the wp_link_pages_link filter you can use to modify the class names - in fact, the entire <a> tag. – Sally CJ Jul 25 '19 at 8:45
  • @SallyCJ How can I achieve this? I am a newbie... – Matthew Jul 25 '19 at 13:22
1

You can use the wp_link_pages_link filter like so:

// Specify the text even if they're same as the default. This is for the filter below to work as intended.
$prev_text = 'Previous Page';
$next_text = 'Next Page';

add_filter( 'wp_link_pages_link', function( $link ) use ( $prev_text, $next_text ){
    if ( false !== strpos( $link, $prev_text ) ) { // It's a link to the previous page.
        $link = str_replace( 'class="post-page-numbers"', 'class="post-page-numbers prev-page-link"', $link );
    }
    elseif ( false !== strpos( $link, $next_text ) ) { // or to the next page.
        $link = str_replace( 'class="post-page-numbers"', 'class="post-page-numbers next-page-link"', $link );
    }
    return $link;
} );

wp_link_pages( array(
    'before'           => '<div class="page-links">',
    'after'            => '</div>',
    'next_or_number'   => 'next',
    'previouspagelink' => $prev_text,
    'nextpagelink'     => $next_text,
) );

Just change the post-page-numbers prev-page-link and post-page-numbers next-page-link to your liking.

1
  • 1
    Perfect solution, thank for your help! – Matthew Jul 26 '19 at 1:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.