How to use images as nav buttons in Wordpress?

Question

Here is my navbar in header.php

<!-- NAV -->   
    <div id="nav">
        <ul>
            <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/home.png" alt="Ad image" /></a></li>
            <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav2.png" alt="Ad image" /></a></li>
            <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav3.png" alt="Ad image" /></a></li>
            <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav4.png" alt="Ad image" /></a></li>
            <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav5.png" alt="Ad image" /></a></li>
            <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav6.png" alt="Ad image" /></a></li>
            <?php wp_list_categories('title_li='); ?>
        </ul>
    </div>
<!-- END NAV -->

How do I get each button to go to there respected pages? If I add in a category through the dashboard it adds in a text based link. I just want the images to represent the different categories, any thoughts?

Answer 1

I think you have two options:

• manipulate the wp_list_categories() function to display images

• manipulate the text links via CSS to hide the text, and show a background image instead (color: transparent; display: block; height: xyz; width: xyz; background-image: url(...)) that depends strongly on how the list is rendered, and whether there are any characteristics to identify each list item.

The cleanest way would certainly be rewriting wp_list_categories() or using a plugin that provides a replacement. See this Wordpress forum entry: How to customize wp_list_categories()?

Answer 2

Each hard link needs to go somewhere:

<a href="<?php bloginfo('url'); ?>/categoryname/">