These two functions create anchor links, and you can customize a lot of it, but it’s impossible to add a class through just using their parameters alone. Gotta add a function to functions.php:
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"';
}
Once again, thanks! I changed this a bit to accommodate different styles for next/previous. Here is what I did in case anyone else needs to have a class for each:
Thanks Chris! Loved your method!
another way to do this without a function would be to class an LI around each link:
brent
@
mimoYmima.com
check out our wordpress shell – html5.mimoymima.com
I like Brent’s method, except I used … as a wrapper around each link instead of tags. I was lazy and didn’t feel like writing the extra CSS for the list items, but worked just as well.
I like Brent’s method, except I used span tags to wrap around each link instead of li tags. I was lazy and didn’t feel like writing the extra CSS for the list items, but worked just as well.
I cannot get the ul/li approach to work. Styling is fixed what ever I do …. any ideas what I am doing wrong?
Is it also possible to generate an “last_posts_link” ? If you have for example 5 result pages, you would jump to page 5 immediately..
wp pagenavi uses it, but I won’t want to use that plugin.
I liked Brent’s way of doing.
Hi, thanks much!
This solved half of my “problems”.. any idea how to add custom styles to
next
/previous_post_link
? I tried the obvious way of addingnext_post_link_attributes
, but it didn’t work.Any help appreciated :]
Martin, I had the same question. I tracked down the WordPress code. It turns out that WordPress applies the filters on the single post links a little differently. I’ve included some code below that works for those links. In can be used in conjunction with the code above.
Hello Justin, i just want to say A ZILLION THAKS ;)
that one worked for me in WP 4.5.
Thanks a lot for sharing.
How can you add a class to “<a href" ather than "” for the wordpress menu as you would need to for implementations of fancybox?
How would i surround the link in a
<div>
so i could put it on its on bar, when i try putting it in a<div>
it puts the div at the top of the page but the navigation itself stays after all the posts.Thanks a lot for you help on this. I have successfully added a class to both, previous and next links.
However, as you can see I am having issues with using AJAX to load posts into my box-right DIV. I am using the following code to load links:
I am trying to use the
previous_posts_link()
function and put it wherepage.php
is, in the code above. I cannot get it to work? I am quite new to PHP, so it may be simple?I wish to alter the
return '<a href="' . previous_posts( false ) . "\" $attr>". preg_replace( '/&([^#])(?![a-z]{1,8};)/i', '&$1', $label ) .'</a>';
code in the link-template.php file so that the href is a hash,href=#
, and the$attr
loads theonclick="javascript:ajax_loadContent('box-right','page.php');return false"
– Whereby page.php actually uses a function to load the previous and next page.Please help me with this!
Thanks!
This is the approach I took, which did not work…
Thanks a lot for this information. The tip given by Justin works perfectly for my situation.
really having a hard time trying to add a filter onto these links in the head of the page
I just want to add an ID of “pref” & “next” to be targeted by a simple page swipe but for some reason documentation on these links is hard to come by unless you want to remove them.
can any one suggest a post or a snippet to create something like
this
<link id="prev" rel='prev' title='Waiting' href='http://www.seventhsecond.com/waiting/' />
Why would you wna do that when you already have:
the only thing you need to make sure you have is you page/post class…
Because you may have existing classes you wish to apply to your links.
Hello, thanks a lot !
Justin Klemm method worked for me on previous/next posts links.
If anyone wants to add a specific class to the previous/next comments links, here is the code
Worked for me on WP 4.1
THANKS AGAIN css-tricks !
Hi guys. You may also look at get_adjacent_post function. It more flexible.
Works great!
http://codex.wordpress.org/Function_Reference/get_adjacent_post
Just what I needed, thanks!
For next navs on one page: http://justinklemm.com/add-class-to-wordpress-next_post_link-and-previous_post_link-links/