Title: previous_post_link image replacement
Last modified: August 19, 2016

---

# previous_post_link image replacement

 *  [bigskydj07](https://wordpress.org/support/users/bigskydj07/)
 * (@bigskydj07)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/)
 * I would like to know how I could use image(s) for navigation in the archives 
   of a site I am working on…
 * In other words, I now have the code:
 * <?php next_post_link(‘%link’, ‘newer’, TRUE, ”); ?>
    <?php previous_post_link(‘%
   link’, ‘older’, TRUE, ”); ?>
 * and the browser displays the words “newer” and “older” respectively. I would 
   like to replace the words with L/R arrows (.png images). I have tried several
   variations of the aforementioned code to no avail. Please help…
 * thanks in advance

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129158)
 * Markup:
 *     ```
       <ul class="prevnext">
       <li class="prev"><?php previous_posts_link('%link', 'newer', TRUE, '');?></li>
       <li class="next"><?php next_posts_link('%link', 'older', TRUE, ''); ?></li>
       </ul>
       ```
   
 * CSS
 *     ```
       .prevnext li {
       	list-style-image:none;
       	list-style:none;
       }
       .prevnext {
       	margin:20px 0;
       	padding:0;
       	text-align:center;
       }
       .prevnext li {
       	margin:0;
       	padding:0 10px;
       	display:inline;
       }
       .prevnext .next a {
       	padding:0 20px 0 10px;
       }
       .prevnext .prev a {
       	padding:0 10px 0 20px;
       }
       .prevnext .next a {
       	background:url(images/next.gif) no-repeat center right;
       }
       .prevnext .prev a {
       	background:url(images/prev.gif) no-repeat center left;
       }
       ```
   
 *  [evilenglishman](https://wordpress.org/support/users/evilenglishman/)
 * (@evilenglishman)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129267)
 * this code doesnt work
 *  [garywgehiere](https://wordpress.org/support/users/garywgehiere/)
 * (@garywgehiere)
 * [17 years ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129310)
 * I think that’s supposed to be “previous_post_link” and “next_post_link” singular,
   not plural.
 *  [kristovaarmari](https://wordpress.org/support/users/kristovaarmari/)
 * (@kristovaarmari)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129344)
 * try this:
 *     ```
       <?php previous_post_link('%link','<img src="prev.png"/>'); ?>
       <?php next_post_link('%link','<img src="next.png"/>'); ?>
       ```
   
 *  [themil](https://wordpress.org/support/users/themil/)
 * (@themil)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129346)
 * How can I implement this into a ‘hot spot’ on an image? Why doesn’t it just generate
   a hyperlink instead of text?
 *  [themil](https://wordpress.org/support/users/themil/)
 * (@themil)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129347)
 * Ok, I found something that I ended up implementing:
 * [http://wordpress.org/support/topic/276611?replies=3](http://wordpress.org/support/topic/276611?replies=3)
 *     ```
       <?PHP
       $current =  get_permalink();
       $prevPost = get_previous_post(true);
       $prevURL = get_permalink($prevPost->ID);
       $nextPost = get_next_post(true);
       $nextURL = get_permalink($nextPost->ID);
       ?>
         <map name="Map" id="Map">
           <area shape="circle" coords="142,43,40" href="<?php echo get_settings('home'); ?>" />
           <area shape="circle" coords="343,43,37" href="../" />
           <area shape="circle" coords="829,43,39" href="<?php echo $prevURL ?>" />
           <area shape="circle" coords="1147,43,39" href="<?php echo $nextURL ?>" />
         </map>
       ```
   
 *  [aptdesignonline](https://wordpress.org/support/users/aptdesignonline/)
 * (@aptdesignonline)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129366)
 * Thanks kristovaarmari, that was just what I needed!
 *  [thinkdj](https://wordpress.org/support/users/thinkdj/)
 * (@thinkdj)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129368)
 * Try this
 * <div class=”navigation”>
 *  <?php previous_post_link(‘<div class=”ImagePrev”>%link</div>’, ‘%title’); ?>
   
   <?php if(!get_adjacent_post(false, ”, true)) { echo ‘<div class=”ImagePrevEmpty”
   >DISABLED</div>’; } ?>
 *  <?php next_post_link(‘<div class=”ImageNext
    “>%link</div>’, ‘%title’); ?> <?
   php if(!get_adjacent_post(false, ”, false)) { echo ‘<div class=”ImageNextEmpty”
   >DISABLED</div>’; } ?>
 * </div>
 * In this, give CSS classes like
    .ImageNext { background:url(…); height: 50px;
   width:50px } etc..
 *  [noelgreen](https://wordpress.org/support/users/noelgreen/)
 * (@noelgreen)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129372)
 * Here’s how I did it.
    PHP code for your template…
 * > posts_nav_link(”, ‘<div id=”entry_previous”><span>Previous Entry</span></div
   > >’, ‘<div id=”entry_next”><span>Next Entry</span></div>’);
 * CSS code…
 *     ```
       #entry_next {
       	float: right;
       	display: block;
       	width: 159px;
       	height: 38px;
       	margin: 10px 20px 40px 0px;
       	background: url("images/entry_next.png") no-repeat 0 0px;
       }
   
       #entry_next:hover {
         background-position: 0 -38px;
       }
   
       #entry_next span {
       	display: none;
       }
   
       #entry_previous {
       	float: left;
       	display: block;
       	width: 229px;
       	height: 38px;
       	margin: 10px 0 40px 20px;
       	background: url("images/entry_previous.png") no-repeat 0 0px;
       }
   
       #entry_previous:hover {
         background-position: 0 -38px;
       }
   
       #entry_previous span {
       	display: none;
       }
       ```
   

Viewing 9 replies - 1 through 9 (of 9 total)

 The topic ‘previous_post_link image replacement’ is closed to new replies.

## Tags

 * [archives](https://wordpress.org/support/topic-tag/archives/)
 * [image replacement](https://wordpress.org/support/topic-tag/image-replacement/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)
 * [next_post_link](https://wordpress.org/support/topic-tag/next_post_link/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 9 participants
 * Last reply from: [noelgreen](https://wordpress.org/support/users/noelgreen/)
 * Last activity: [16 years, 3 months ago](https://wordpress.org/support/topic/previous_post_link-image-replacement/#post-1129372)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics