I am using the WP-Paginate plug-in and need to apply a class to the containing LIs for the next/previous links. Can someone tell me how to do this? If there's a better/easier way to do this other than using WP-Paginate, then I'm open to suggestions. Thanks!

I am using the WP-Paginate plug-in and need to apply a class to the containing LIs for the next/previous links. Can someone tell me how to do this? If there's a better/easier way to do this other than using WP-Paginate, then I'm open to suggestions. Thanks!

• plugins
• css
• pagination

Share Improve this question asked Jan 21, 2011 at 16:57 user1462user1462 1,30433 gold badges1717 silver badges2323 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Happy to say that it's not hard at all to achieve what you are looking for.

As I understand it, you have to add a call to wp_paginate() in (one of) your theme(s) template file(s) when using this plugin, and that call looks something like this:

<?php if(function_exists('wp_paginate')) {
  wp_paginate();
} ?>

To do what you need just create your own function, let's call it mysite_paginate() and call it instead of the code above.

Within your function mysite_paginate() call ob_start() to start output buffering, then call wp_paginate(), and then call ob_get_clean() to capture the output created by wp_paginate(). The final step is to then use a regular expression search and replace with preg_replace() to add the classes you want and then echo the results to the browser.

The code you need is below. You can add it to your theme's functions.php file or in a .php file of a plugin you may be writing:

function mysite_paginate() {
  if(function_exists('wp_paginate')) {
    ob_start();
    wp_paginate();
    $html = ob_get_clean();
    $html = preg_replace('#<li>(<a href="[^"]+" class="next">)#Us',
              '<li class="next">$1',$html);
    $html = preg_replace('#<li>(<a href="[^"]+" class="prev">)#Us',
              '<li class="prev">$1',$html);
    echo $html;
  }
}

And if all goes as planned, this is what you should expect to see when using an element inspector with your browser:

If I understand you correctly, you want to change:

<li><a href="http://www.ericmmartin/blog/page/2/" class="next">»</a></li>

To:

<li class="next"><a href="http://www.ericmmartin/blog/page/2/" class="next">»</a></li>

Besides modifying the source, you could do it with a little jQuery magic:

$('ol.wp-paginate .next').parent().addClass('next');

And:

$('ol.wp-paginate .prev').parent().addClass('prev');