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="/" class="post-page-numbers">PREVIOUS</a>
    <a href="/" class="post-page-numbers">NEXT</a>
</div>

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/xxxxxx/2/" class="post-page-numbers">PREVIOUS</a>
    <a href="http://test/xxxxxx/4/" class="post-page-numbers">NEXT</a>
</div>

• posts
• wp-link-pages

Share Improve this question asked Jul 25, 2019 at 3:58 MatthewMatthew 15155 bronze badges 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 Commented Jul 25, 2019 at 8:45
• @SallyCJ How can I achieve this? I am a newbie... – Matthew Commented Jul 25, 2019 at 13:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.