Support » How-To and Troubleshooting » Next/previous post links: replace text with image

Next/previous post links: replace text with image

  • hrrubin


    I’m looking for a solution regarding the next/previous post links found on individual posts (or the single.php file).

    This is the default state in Responsive Theme:

    <div class="navigation">
    <div class="previous"><?php previous_post_link( '%link' ); ?></div>
    <div class="next"><?php next_post_link( '%link' ); ?></div>

    But I want to add a class to each, adding a background to the link and removing the text. According to several sites, this should work.

    add_filter('next_posts_link_attributes', 'posts_link_attributes_1');
    add_filter('previous_posts_link_attributes', 'posts_link_attributes_2');
    function posts_link_attributes_1() {
    	return 'class="prev-post"';
    function posts_link_attributes_2() {
    	return 'class="next-post"';

    Is the %link specific to this theme? What will I need to change?

Viewing 10 replies - 1 through 10 (of 10 total)
  • As per the theme developer’s request, please post in the theme’s dedicated forum: http://cyberchimps.com/forum/free/responsive/



    Yes, but they won’t help with php related questions. Only css.

    Can you please provide a site link if possible and note which page(s) you seek to mod the CSS for? This should be doable with just CSS (so per your own comment and Esmi’s ask theme dev.’s for help on the CSS side, should not need to edit that php)



    A pure css suggestion is working, but as you can see on the link (single.php), the linked text will show up regardless of what I put in. It’s a php decision to make the text inside a link. I want to not get the text at all and just the link.

    What if you just hide it with color:transparent? on the hover also.



    That won’t remove the text, if you are highlighting it 🙂

    That is true, but who does that?

    BTW, are you using a Child Theme?



    Yes, I have made a child theme of the Responsive Theme.

    Do you have a suggestion about what I should try?



    I found a solution:

    After each ‘%link’ I added comma seperation and image tag.

    <div class=”previous”><?php previous_post_link( ‘%link’, ‘<img src=”your-image-source”>‘ ); ?></div>

    In my css, I added text-indent:-9999px; to .previous a



    Thanks hrrubin!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Next/previous post links: replace text with image’ is closed to new replies.
Skip to toolbar