CODEWITHSUNDEEP
phpwordpresspaginationwordpress-themingcustom-wordpress-pages
dash
dash

Reputation: 1289

How To Add a Class to Prev/Next on Wordpress Pagination? (paginate_links)

I modified my Wordpress functions.php to show a pagination:

<?php echo paginate_links( array(
    'prev_text'          => __('Previous Page'),
    'next_text'          => __('Next Page'),
    'type'               => 'list'
) ); ?>

The output is nearly perfect:

<ul class="page-numbers">
    <li>
        <span class="page-numbers current">1</span>
    </li>
    <li>
        <a class="page-numbers" href="https://domain.tld/page/2/">2</a>
    </li>
    …
    <li>
        <a class="page-numbers" href="https://domain.tld/page/10/">10</a>
    </li>
    <li>
        <a class="next page-numbers" href="https://domain.tld/page/2/">Next Page</a>
    </li>
</ul>

Is there a way to add a class to the Prev and Next list item li?

    <li class="prev-list-item">
        <a class="prev page-numbers" href="http://domain.tld/page/1/">Previous Page</a>
    </li>

&

    <li class="next-list-item">
        <a class="next page-numbers" href="http://domain.tld/page/2/">Next Page</a>
    </li>

Upvotes: 4

Views: 14171

Answers (2)

bswatson
bswatson

Reputation: 467

Instead of having the function output directly, you could have the list of links returned as an array. You can then target the next and previous links with their own respective functions.

$links = paginate_links( array(
  'prev_next'          => false,
  'type'               => 'array'
) );

if ( $links ) :

    echo '<ul class="page-numbers">';

    // get_previous_posts_link will return a string or void if no link is set.
    if ( $prev_posts_link = get_previous_posts_link( __( 'Previous Page' ) ) ) :
        echo '<li class="prev-list-item">';
        echo $prev_posts_link;
        echo '</li>';
    endif;

    echo '<li>';
    echo join( '</li><li>', $links );
    echo '</li>';

    // get_next_posts_link will return a string or void if no link is set.
    if ( $next_posts_link = get_next_posts_link( __( 'Next Page' ) ) ) :
        echo '<li class="next-list-item">';
        echo $next_posts_link;
        echo '</li>';
    endif;
    echo '</ul>';
endif;

Upvotes: 7

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

Here is a javascript (jQuery) solution. Not nice, but it works:

(function ( $ ) {
 
  $('ul.page-numbers li a').each(function() {
    var $this = $(this);
    if ( $this.hasClass('prev') ) $this.parent('li').addClass('prev-list-item');
    if ( $this.hasClass('next') ) $this.parent('li').addClass('next-list-item');      
  });
 
}( jQuery ));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="page-numbers">
    <li>
        <span class="page-numbers current">1</span>
    </li>
    <li>
        <a class="page-numbers" href="https://domain.tld/page/2/">2</a>
    </li>
    …
    <li>
        <a class="page-numbers" href="https://domain.tld/page/10/">10</a>
    </li>
    <li>
        <a class="next page-numbers" href="https://domain.tld/page/2/">Next Page</a>
    </li>
</ul>

Just wrap the javascript code in <script></script>tags and insert it nearby after the paginate_links()function.

Upvotes: 0

Related Questions