Quick WP Tip: pagination classes

October 06th, 2009 – 17 Comments

One of my colleagues was working on a site for a client of ours, and needed to apply styling to the previous and next post link. As in most of our sites we use Lester Chan‘s excellent wp-pagenavi plugin so I dove into that to check how I could style it.

Turns out Lester is being very good about it and is using the WordPress internal functions next_posts_link and previous_posts_link. This is good because both of these functions have a simple filter that we can hook onto to add a class to those links, and the code below will work in all instances, also when you’re not using Lester’s plugin but just plain old WordPress.

By default, those links don’t have any classes on them, but by adding the following two simple functions to our functions.php, we can add those very easily:

function previous_posts_link_class() {
  return 'class="previouspostslink"';
}
add_filter('previous_posts_link_attributes','previous_posts_link_class');

function next_posts_link_class() {
  return 'class="nextpostslink"';
}
add_filter('next_posts_link_attributes','next_posts_link_class');

If you’ve added these two functions to your functions.php, you can now use the previouspostslink and nextpostslink CSS classes to style these two links!


17 Responses to Quick WP Tip: pagination classes

  1. Michael Aulia
    By Michael Aulia on 10 November, 2009

    I prefer the Page 1,2,3….rather than Previous and Next Posts though. It’s a little bit more hassle to set-up but I think it’s better for navigation somehow :)

    I set-up my blog with the Page 1,2,3…and I like it that way

  2. Saima Farooque
    By Saima Farooque on 4 November, 2009

    Thanx for the useful info !!

  3. Maleficus
    By Maleficus on 24 October, 2009

    Now I wish you’ve made a complete tutorial on how to implement and style paged navigation in WordPress without the use of any plugins. That’d be veeery handy.

  4. Ronblogger
    By Ronblogger on 13 October, 2009

    Nice tip there,i’d really wanted to learn a bit of coding and im glad to read your post here

  5. Lester Chan
    By Lester Chan on 9 October, 2009
  6. Matt
    By Matt on 8 October, 2009

    Another good tip as always. Thanks!

  7. Luci
    By Luci on 8 October, 2009

    Hey thanks for the tip, this is a great bit of information to keep handy. I look forward to more handy hints ;)

  8. Unique wedding ideas
    By Unique wedding ideas on 7 October, 2009

    Thanks for this post. I have read your blog re wordpress plugins and wanted to ask is there such a thing as too many plug ins?? Can there be a negative effect of installing too many??

    • DutchAmsterdam.nl
      By DutchAmsterdam.nl on 12 October, 2009

      I like plugins but in my experience — running a few dozen WordPress sites — one negative effect is that you spend more and more time keeping the plugins up-to-date.

      Often it is not just a matter of simply updating to the next version. Some plugins change behavior or break and/or turn out to be incompatible with WP upgrades.

      When I do install or upgrade plugins, I make sure I have backups — and I also keep a copy of the old plugin version around, just in case it is needed.

  9. Sil Kogelman
    By Sil Kogelman on 7 October, 2009

    Hey Yoast, did my comment about WP Page Numbers get stuck in the comment spam filter?
    I really like it, maybe even more than the pagenavi plugin. But that’s just a matter of opinion of course. :)

  10. Steven Roddy
    By Steven Roddy on 7 October, 2009

    Thanks for the info. I am subscribing to the RSS feed.

  11. Adam W. Warner
    By Adam W. Warner on 7 October, 2009

    I honestly didn’t know what that was (not a real programmer). However, knowing it wasn’t necessary is helpful:)

    Thanks for the help!

  12. Adam W. Warner
    By Adam W. Warner on 7 October, 2009

    Great tip Joost, thanks! Can you clear something up for us? What is the ($attr) part of the code?

    • Joost de Valk
      By Joost de Valk on 7 October, 2009

      nonsense :P actually the last ‘,10,1’ in the add_filter could be removed as well… Cleaning up…

  13. Sil Kogelman
    By Sil Kogelman on 6 October, 2009

    Thanks for the tip Yoast, let me give you one to return the favor:
    I always use this plugin for page navigation
    http://wordpress.org/extend/plugins/wp-page-numbers/
    By default you can select from 5 layout themes and you can create/include your own wp page number theme.
    examples on
    http://www.jenst.se/2008/03/29/wp-page-numbers/
    and you can customize what you display als navigation, like next / previous page text, start and end numbers and page numbers, all from within the WordPress admin backend.


Check out our must read articles about Analytics