wp_nav_menu(), how to change class?

by

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?

5

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.

Leave a Comment