Support » Fixing WordPress » 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)
  • 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>


    .prevnext li {
    .prevnext {
    	margin:20px 0;
    .prevnext li {
    	padding:0 10px;
    .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;

    this code doesnt work

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



    try this:

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

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

    Ok, I found something that I ended up implementing:

    $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 ?>" />

    Thanks kristovaarmari, that was just what I needed!

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


    In this, give CSS classes like
    .ImageNext { background:url(…); height: 50px; width:50px }

    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.