1

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!

2 Answers 2

1
+50

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.

1
  • This seems like it's the exact answer I needed. Let me try to implement it and I'll get back to you (slash give this answer the check). For now, +1 for a full answer :)
    – Amit
    Sep 15, 2011 at 12:20
0

Install this plugin and explore their code. It has all the stuffs you asked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.