# wp_nav_menu(), how to change <li> class?

I'm building a menu for my website. The static is looking like this:

<nav>
<li class="item_1"><a href="#">Item 1</a></li>
<li class="item_2"><a href="#">Item 2</a></li>
<li class="item_3"><a href="#">Item 3</a></li>
<li class="item_4"><a href="#">Item 4</a></li>
<li class="item_5"><a href="#">Item 5</a></li>
<li class="item_6"><a href="#">Item 6</a></li>
<li class="item_7"><a href="#">Item 7</a></li>
<li class="item_8"><a href="#">Item 8</a></li>
</ul>


I've been able to understand how to customized the <ul> tag, to get rid of the automatic <div> tag. But now, I want to customized the <li> tag to be able to assign different class name to control specific behavior through CSS. When I use the wp_nav_menu() the output is as follow:

    <ul id="menu">
</ul>


I want to get rid of the id in the <li> tags and change the class to reflect the name of the page I want to link to. Basically I want to output the the same thing as the 1st snippet of code in this post.

The reason why I doing this, is that I use custom images that is controled by my CSS insted of plain text.

Is this possible? What strategy I should use to overcome this problem?

-

Use a custom walker, remove anything you don’t need and add your classes. Here is a walker I use to get a list with clean markup: T5_Nav_Menu_Walker_Simple.

Your could also filter 'nav_menu_css_class' or 'wp_nav_menu_items'. But a walker class is easier to understand and to control in my opinion.

-
Thanks Toscho, I just find that in the new version of Wordpress (3.3) we can add custom class fir each menu items wich kind of solve my problem. I tried the script you suggested to me (T5_Nav_Menu_Walker_Simple) which does strip everything from the <li>, how can we control which elements we want to keep? –  Christian Dec 26 '11 at 21:20
@Christian You can change the walker as you need, it is just a very basic example. To see which information is available, add a print_r( $item, TRUE ) to each li. Then decide what to do with it. :) – toscho Dec 26 '11 at 22:44 go to appearance > menus - select the menu you want - go to "screen options" at the top right, select "css classes" - add a class to each menu item.. - As the last poster mentioned, you can add your own classes via appearance > menus with CSS classes ticked in the screen options. In the walker, you can access what you enter there via: $item_output .= '<a'. $attributes .' class="'.$item->classes[0].'">';


I have even used this to add pre-named images in the menu - a little flakey, but it works.

<img src="theme/images/navigation/'.\$item->classes[0].'" width="48" height="48">

-