WordPress navigation with images

Question

I am working on a WordPress site at the moment. Everything is doing fine except my navigation. I don't want to use the standard text and css based navigation WordPress uses, but insert my own navigation with graphic images (PNG files, Can change filetype if necessary though).

Does anyone know of any sort of plugin for WordPress that allows you to have images instead of text in the navigation?

Regards, Nader

Answer 1

do you want to have your own css file ? if it is you can just use this to say to wordpress use your own css file :

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

example :

<?php

    /*
     * This example will work with WordPress 2.7
     */

    /*
     * register with hook 'wp_print_styles'
     */
    add_action('wp_print_styles', 'add_my_stylesheet');

    /*
     * Enqueue style-file, if it exists.
     */

    function add_my_stylesheet() {
        $myStyleUrl = plugins_url('style.css', __FILE__); // Respects SSL, Style.css is relative to the current file
        $myStyleFile = WP_PLUGIN_DIR . '/myPlugin/style.css';
        if ( file_exists($myStyleFile) ) {
            wp_register_style('myStyleSheets', $myStyleUrl);
            wp_enqueue_style( 'myStyleSheets');
        }
    }

?>

Answer 2

Changing the output of the nav bar requires styling the output of the wp_navmenu() function. You can see that output with firebug. This will look something like:

<li id="menu-item-689" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-689">
    <a href="#">Categories</a>
</li>

Target the id or class with a background image and optionally hide the menu text. The recommended way to do that is with the style.css file in a child theme. Don't mess with the parent's files at all. Just import them in a new style.css file. Check the codex on making child themes.

Try something like this:

#menu-item-689{
    background-image: url('whatever.img');
    margin: -999em;
    font-size: 0;
}

don't use display:none because you want screen readers to read it. Another method involves setting the positioning to absolute for the list as a whole and setting the left: -999em.