previous_post_link image replacement

  • bigskydj07

    (@bigskydj07)


    16 years, 11 months 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

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

    (@esmi)

    16 years, 11 months 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;
}

    evilenglishman

    (@evilenglishman)

    16 years, 10 months ago

    this code doesnt work

    garywgehiere

    (@garywgehiere)

    16 years, 9 months ago

    I think that’s supposed to be “previous_post_link” and “next_post_link” singular, not plural.

    kristovaarmari

    (@kristovaarmari)

    16 years, 4 months ago

    try this:

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

    themil

    (@themil)

    16 years, 3 months ago

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

    themil

    (@themil)

    16 years, 3 months ago

    Ok, I found something that I ended up implementing:

    http://ww.wp.xz.cn/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

    (@aptdesignonline)

    16 years, 1 month ago

    Thanks kristovaarmari, that was just what I needed!

    thinkdj

    (@thinkdj)

    16 years, 1 month 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..

    noelgreen

    (@noelgreen)

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

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

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