WordPress.org

Ready to get started?Download WordPress

Forums

Add Next and Previous Links with Images? (9 posts)

  1. VizionQuest
    Member
    Posted 5 years ago #

    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!

  2. hotkee
    Member
    Posted 5 years ago #

    <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?

  3. VizionQuest
    Member
    Posted 5 years ago #

    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.

  4. hotkee
    Member
    Posted 5 years ago #

    <?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

  5. VizionQuest
    Member
    Posted 5 years ago #

    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?

  6. George Wiscombe
    Member
    Posted 5 years ago #

    Hi Vizion
    That's just a styling issue,

    #div-name img {
    border:none;
    }

    should sort it out :)

  7. VizionQuest
    Member
    Posted 5 years ago #

    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>

  8. Dgold
    Member
    Posted 5 years ago #

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

  9. mmubashar
    Member
    Posted 5 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic