WordPress.org

Ready to get started?Download WordPress

Forums

previous and next post link as image rollovers (5 posts)

  1. evilenglishman
    Member
    Posted 5 years ago #

    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?

  2. skevbo
    Member
    Posted 4 years ago #

    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?

  3. Peter Boosten
    Member
    Posted 4 years ago #

    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

  4. vivtom
    Member
    Posted 4 years ago #

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

    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 :-)

Topic Closed

This topic has been closed to new replies.

About this Topic