WordPress.org

Forums

Next/previous post links: replace text with image (11 posts)

  1. hrrubin
    Member
    Posted 1 year ago #

    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>
    </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?

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    As per the theme developer's request, please post in the theme's dedicated forum: http://cyberchimps.com/forum/free/responsive/

  3. hrrubin
    Member
    Posted 1 year ago #

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

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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)

  5. hrrubin
    Member
    Posted 1 year ago #

    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.

  6. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

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

  7. hrrubin
    Member
    Posted 1 year ago #

    That won't remove the text, if you are highlighting it :)

  8. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    That is true, but who does that?

    BTW, are you using a Child Theme?

  9. hrrubin
    Member
    Posted 1 year ago #

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

    Do you have a suggestion about what I should try?

  10. hrrubin
    Member
    Posted 1 year ago #

    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

  11. corido01
    Member
    Posted 4 months ago #

    Thanks hrrubin!

Topic Closed

This topic has been closed to new replies.

About this Topic