Support » Themes and Templates » previous and next post link as image rollovers

  • evilenglishman

    (@evilenglishman)


    Hi
    I searched for info on this but couldnt find any. I want to use “next_post_link” and “previous_post_link” in a template I’m making but instead of text links I want to replace them with image rollovers.
    I also only want to do this in 1 category.
    So an example of the normal code is:
    <?php previous_post_link('%link', '%title', 'TRUE'); ?>

    But im getting stuck with the tag when I need to use an image.

    CSS I have is this:

    #back{
    	width:65px;
    	height:30px;
    	margin:0 auto;
    	background:#acacac url(img/back.jpg) no-repeat;
    }
    
    #back ul{
    	border: 0;
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	text-align: center;
    	clear: left;
    }
    
    #back ul li{
    	display: block;
    	float: left;
    	text-align: center;
    	padding: 0;
    	margin: 0;
    }
    
    #back ul li a span{
    	display:none;
    }
    
    #back ul li a{
    	width:65px;
    	height:30px;
    	margin:0px;
    	padding:0px;
    	display: block;
    
    }
    
    /* -- Hovers -- */
    
    #back ul li a.back:hover{
    	background: url(img/back.jpg) 0px -30px;
    }

    To use this with html code would be;

    <div id="back">
    	<ul>
    		<li><a href="link" class="back"><span>back</span</a>
    </li>
    	</ul>
    </div>

    When i try to use this code in wp however it doesnt work;

    <div id="back">
    	<ul>
    		<li><a href="<?php previous_post(' %', '<img src="images/back.jpg" />', 'TRUE'); ?>" class="back"><span>back</span></a></li>
    	</ul>
    </div>

    Can anyone give me some guidence where im going wrong?

Viewing 4 replies - 1 through 4 (of 4 total)
  • I am having this exact same issue… I want to display a link to a previous post through an image not the default text. I haven’t come up with a solution yet, maybe someone else has an idea?

    You should create background images in css, and move the text out of the way (text-indent: -9999px;).

    A similar solution has been presented here: http://wordpress.org/support/topic/308719

    Well I am using the following code and it is displaying the images and link correctly.

    <div class="navigation-previous"><?php previous_post_link('%link', '<img src="http://localhost/website.gif" alt="Previous" />') ?></div>

    Thanks vivtom, that worked for me. The only caution I’d mention is that you have to hard code the image links, rather than using the php code to source the template folder. Or at least that’s beyond my abilities 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘previous and next post link as image rollovers’ is closed to new replies.