WordPress.org

1. neweb
   Member
   Posted 1 year ago #

   Theme: TwentyTen
   Page: single.php

   I would like to change the next post and previous post arrows to little icons.
   This is the current code
   

   <div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
   					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>

   I would like to take out ← and replace it with a path to an image but I don't know how to format it or get it to work. I put the image link in between the brackets but that did not work for me.

   How do I change the code to get this to work.

2. neweb
   Member
   Posted 1 year ago #

   Can I assume by the lack of a reply that this can't be done???

3. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   Try using:
   

   <div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
   <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( 'Next post link', 'twentyten' ) . '</span>' ); ?></div>

   Then add your images via CSS using something like:

   .prevnext .next a {
       padding:0 10px 0 20px;
       background:url(images/arrow-left.gif) no-repeat left bottom;
   }
   .prevnext .prev a {
       padding:0 20px 0 10px;
       background:url(images/arrow-right.gif) no-repeat right bottom;
   }

4. neweb
   Member
   Posted 1 year ago #

   That worked perfect.

   Thanks for your help esmi
   Its not the first time you helped me and I'm very grateful for that.

   Here is the link so you can see it working:
   Post on my site

   Images are not the best but I can work on that now I get it sorted.

   Thanks again.

5. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   That looks quite good. :-)

Topic Closed

This topic has been closed to new replies.