WordPress.org

1. bigskydj07
   Member
   Posted 2 years ago #

   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

2. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   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;
   }

3. evilenglishman
   Member
   Posted 2 years ago #

   this code doesnt work

4. GaryWGehiere
   Member
   Posted 2 years ago #

   I think that's supposed to be "previous_post_link" and "next_post_link" singular, not plural.

5. kristovaarmari
   Member
   Posted 2 years ago #

   try this:
   

   <?php previous_post_link('%link','<img src="prev.png"/>'); ?>
   <?php next_post_link('%link','<img src="next.png"/>'); ?>

6. themil
   Member
   Posted 2 years ago #

   How can I implement this into a 'hot spot' on an image? Why doesn't it just generate a hyperlink instead of text?

7. themil
   Member
   Posted 2 years ago #

   Ok, I found something that I ended up implementing:

   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>

8. aptdesignonline
   Member
   Posted 2 years ago #

   Thanks kristovaarmari, that was just what I needed!

9. thinkdj
   Member
   Posted 2 years ago #

   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..

10. noelgreen
    Member
    Posted 2 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.