Support » Themes and Templates » Custom Navigation Using Images

  • Resolved novice21


    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)

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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);


    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 documentation. Really appreciate your help!

    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,

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Navigation Using Images’ is closed to new replies.