Add class to links generated by WordPress “next_post_link” and “previous_post_link” functions

While I was working on my Crisp Persona WordPress theme, I ran into a situation where I needed to add a class to the “Next” and “Previous” links that WordPress places at the bottom of each post (I’ll spare you the details of why I needed to do this). The links are created with a core WordPress function so the markup can’t be edited.


Update: A commenter below has shared a method of targeting these links with CSS using the “rel” attribute, which is quite a bit nicer than my original solution. You can style the links using the selectors a[rel="prev"] { } and a[rel="next."] { }. If you prefer the original method of adding a class, please read on.


I did some googling to see if they could be customized and turned up this post on Chris Coyier’s css-tricks.com site: Add class to links generated by next_posts_link and previous_posts_link. Here’s the code snippet provided there:

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
    return 'class="styled-button"';
}

This works perfectly… but there’s a problem. Notice the plural “posts” in “next_posts_link_attributes”. These are the links that are displayed at the bottom of the post listings, not the ones at the bottom of individual posts. Logic says we should be able to duplicate this code with the singular forms (“next_post_link” and “previous_post_link”) and it will work. Unfortunately that’s not the case.

After a little digging through the WordPress source files, I found that the filters for the singular next and previous links are applied differently. I’ve created some code below that will add a class to the singular links:

add_filter('next_post_link', 'post_link_attributes');
add_filter('previous_post_link', 'post_link_attributes');

function post_link_attributes($output) {
    $code = 'class="styled-button"';
    return str_replace('<a href=', '<a '.$code.' href=', $output);
}
  • TQ

    Thanks for this. I have been searching the WordPress forums for this solution. I even modified the code a lil bit and included it in my dev blog. http://www.taqin.net

    Thanks!

  • Pingback: Andrew J Macklin | Adobe Certified Expert Training & Freelance Artist()

  • boylecreations

    Thank you for being awesome. This was seriously getting on my nerves. I knew it was a filter, but was having getting it to function, and somehow led myself to believe I could do it with the parameters but it was just all sorts of messy. Then I started to do descendent selectors with CSS to apply the styles, but I knew their had to be a better way. Thanks!

    • Glad it was useful for you! For some reason it’s not documented, so I actually had to dig through the code to find it.

  • Thank You man this was really helpful!

  • … yes! Thank you! I really wanted to avoid wrapping my links in yet another div and this works perfectly 🙂

  • Jim

    Justin, Thanks for finding this for me. I was just following the same trail through core looking for an answer like this and you saved me a bunch of time!

  • Thanks for the hint, Justin! Turns out I don’t need it, though. Once I realized that WordPress programatically adds a “rel” attribute of ‘prev’ and ‘next’ to the appropriate anchors, targeting them with CSS is as simple as:

    a[rel=”prev”] { }

    a[rel=”next”] { }

    • Matthew, great find. Those “rel” attributes may have been added recently (or maybe I just missed them the first time). Either way, your approach is much cleaner. Nice work. I’ll update the post shortly with details.

    • Иван

      Thanks a lot! Great idea! Very usefull.

  • Two questions: what happens if the page is called multiple times? Is it adding the filters multiple times?

    The second question: when is the WordPress people going to give us a function that SIMPLY RETURNS THE LINKS WITHOUT ANY STUPID COMPLICATION?!??!?!?!

  • Hi, I have installed this theme, but comment box is not available beneath pages… how to get one?

  • Cinekpol

    This doesn’t seem to be working any more with theme Twenty Sixteen.

  • Morena Fiore-Kirby

    HI, thanks for this, but I think somebody has hacked your page and added a spam link in the last funciton you wrote

    • Morena, thanks for the heads up! I’ve taken care of the issue.