Inserting specific images inside navigation menu

1 Views

I have a navigation menu that I hard-coded into a recent theme that I developed. Now, it would be a lot easier (and more customizable) to just build this navigation menu using the intrinsic wp_list_pages() function via the wordpress administration panel. There is one catch though. Some of the drop-downs have an image on the left of it. Each drop down only has one image, but the image is different for each drop down. Is there a way I can incorporate this image in the user-interface administration of wordpress? Such as build the menu in WordPress and have a field where I can choose which picture I want in the dropdown.

Thanks!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. This can be done easily with CSS. I would use the default wp_nav_menu() function to do the heavy lifting for you and build your menus under Appearance->Menus. If you click on screen options there is a checkbox under advanced menu properties called CSS Classes. Check that box.

    When you add a new menu item, you can define a CSS class for that specific item. In your stylesheet, create class selectors that correspond to certain images.

    .airplane{
    background:url('images/airplane.png') top left no-repeat;
    padding:0 0 0 25px; 
}

    With this example, you would just add ‘airplane’ to the menu item css class form field.

    This will place images inline with your nav menu items. It’s better to do this in CSS than rebuild what navigation menu functionality WordPress already has baked into it.

    If you don’t see Appearance->Menus add this to your functions.php file:

    add_theme_support('menus');

    Using the drag-and-drop WordPress menu system is a much better user experience. It also keeps complex code out of the theme. To me, creating a separate function to build a navigation menu adds unnecessary overhead to your WordPress installation.

    For more information on WordPress Navigation Menus go to: http://codex.wordpress.org/Navigation_Menus

    Hope this helps you out.