Add Next and Previous Links with Images?

  • I am using the following to display Next and Previous links to navigate between posts: 

    <?php previous_post(' %', 'Previous Post', 'no'); ?>
<?php next_post(' %', 'Next Post', 'no'); ?>

    How do I add an image (e.g. a direction arrow) to each (to the left of ‘Previous’, to right of ‘Next’) that becomes part of the link (image links to next/previous post too) and remove the underlining of the each link as well?

    Thanks for your time and help, it is greatly appreciated!

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

  • <img src=”my_prev_image.jpg” /> <?php previous_post(‘ %’, ‘Previous Post’, ‘no’); ?>
    <?php next_post(‘ %’, ‘Next Post’, ‘no’); ?><img src=”my_next_image.jpg” />

    or is that too simple?

    Thread Starter vizionquest

    (@vizionquest)

    I tried that before but the image isn’t part of the link and the link is still underlined. Also the images appear without the links when there is no next or previous posts to view (when your looking at the first or last post).

    The image must be part of the link so they appear or don’t appear with the links when they are suppose to, and so that when you click on the image it links to the appropriate (next/previous) post too.

    <?php previous_post(‘ %’, ‘<img src=”my_prev_image.jpg” /> Previous Post’, ‘no’); ?>
    <?php next_post(‘ %’, ‘<img src=”my_next_image.jpg” /> Next Post’, ‘no’); ?>

    well try the above, might work

    Thread Starter vizionquest

    (@vizionquest)

    Yes, thanks. It does make the image part of the link, but there is a colored border around the image and the link is still underlined. Any other ideas?

    Hi Vizion
    That’s just a styling issue,

    #div-name img {
border:none;
}

    should sort it out ??

    Thread Starter vizionquest

    (@vizionquest)

    Here’s the solution I used, it works great:

    <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" id="previous_post_container"><?php previous_post(' %', 'Previous Post', 'no'); ?></td><td></td><td align="right" id="next_post_container"><?php next_post(' %', 'Next Post', 'no'); ?></td></tr></table>

    Dgold

    (@dgold)

    Good idea, I’m trying it. For mine I’m using “Rewind” and “Fast Forward” buttons, like on a boombox.

    I still have a problem here..See, now I want to make next image and previous image to be linked..One major problem is, I am unable to call up the images from the themes folder. I’m using this code:

    <?php previous_post(' %', '<img src="images/prevpost.png" alt="Next" border="0" align="right" />', 'no'); ?>
<?php next_post(' %', '<img src="images/nextpost.png" alt="Next" border="0" align="right" />', 'no'); ?>

    I call images using <?php bloginfo('template_url'); ?>/images/nextpost.png So how do I integrate both together? Any idea guys?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Add Next and Previous Links with Images?’ is closed to new replies.