Quick WP Tip: pagination classes

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!

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

17 Responses

  1. Sil KogelmanBy 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.

  2. Adam W. WarnerBy 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 ValkBy 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…

  3. Adam W. WarnerBy 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!

  4. Steven RoddyBy Steven Roddy on 7 October, 2009

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

  5. Sil KogelmanBy 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. :)

  6. Unique wedding ideasBy 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.nlBy 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.

  7. LuciBy 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. MattBy Matt on 8 October, 2009

    Another good tip as always. Thanks!

  9. Lester ChanBy Lester Chan on 9 October, 2009
  10. RonbloggerBy 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

  11. MaleficusBy 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.

  12. Saima FarooqueBy Saima Farooque on 4 November, 2009

    Thanx for the useful info !!

  13. Michael AuliaBy 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

Trackbacks

  1. Quick WP tip: pagination classes…

    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, a…