WordPress.org

Ready to get started?Download WordPress

Forums

previous_post_link image replacement (10 posts)

  1. bigskydj07
    Member
    Posted 5 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
    Forum Moderator
    Posted 5 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 5 years ago #

    this code doesnt work

  4. GaryWGehiere
    Member
    Posted 4 years ago #

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

  5. kristovaarmari
    Member
    Posted 4 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 4 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 4 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 4 years ago #

    Thanks kristovaarmari, that was just what I needed!

  9. thinkdj
    Member
    Posted 4 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 4 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.

About this Topic