Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

<nav>
  <ul id="menu">
        <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">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </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?

share|improve this question

3 Answers 3

up vote 7 down vote accepted

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.

share|improve this answer
    
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
1  
@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

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">
share|improve this answer

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..

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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