[resolved] Custom Navigation Using Images (4 posts)

  1. novice21
    Posted 8 years ago #

    Hello all!
    I'm stumped!

    I read the doc page regarding the next and previous links in the navigation menu, I'm trying to use a button (img tag) for next and previous links, I don't need the previous and next posts' title linked. I just need the urls. How would I do that?

    how can I get this default:
    <?php next_post_link('%link &raquo;') ?>

    to just output the url of the next post where LINK is?
    <a href="LINK"><img src="/images/nav_prev.jpg" alt="prev"/></a>

    Thanks for the response guys.

    (Technically, I can just use a list and black out the text showing the image as background... I really don't want to do that though. The list refuses to style correctly across browsers and it has to be pixel perfect. img tags are just easier)

  2. alakhnor
    Posted 8 years ago #

    use get_next_post($in_same_cat, $excluded_categories) and get_previous_post($in_same_cat, $excluded_categories) instead.

    $in_same_cat: true/false
    $excluded_categories: list of excluded categories

    It returns the post like: $next_post = get_next_post($in_same_cat, $excluded_categories);

    Then take next = get_permalink($next_post->ID);

  3. novice21
    Posted 8 years ago #


    Thanks for the reply, I tried to work that out but it really confused me, instead I came across the solution in this thread, and the implementation worked fine:

    $next_post = get_next_post();
    $prev_post = get_previous_post();
    <a href="<?php echo get_permalink($prev_post->ID);?> "><img src="/images/nav_prev.jpg" title="<?php echo str_replace('"', '\'', $prev_post->post_title); ?>" /></a>
    <a href="<?php echo get_permalink($next_post->ID);?> "><img src="/images/nav_next.jpg" title="<?php echo str_replace('"', '\'', $next_post->post_title); ?>" /></a>

    Your reply though made me wonder if it were possible to write a second navigation system for categories so you can browse a certain category....how would you do that? Any idea?

    I'm only a beginner in PHP, I get confused when I'm reading the wordpress.org documentation. Really appreciate your help!

  4. casimir
    Posted 8 years ago #

    Hi Novice21!

    You are pretty knowledgeable for a beginner! There is a simpler solution to replacing previous and next links with images, in the same category, as well. Simply use the previous_post_link or next_post_link Template Tag, and replace 'link' string with an image source.

    Here is an example:

    <?php previous_post_link('%link', '<img src="/images/nav_prev.jpg">', TRUE); ?>
    <?php next_post_link('%link', '<img src="/images/nav_next.jpg">', TRUE); ?>

    Hope this helps!

    Best Regards,

Topic Closed

This topic has been closed to new replies.

About this Topic