How to rewrite the output of wordpress nav menu?

Question

I have been trying to figure this out for a while. I need to overwrite the default output of the wordpress nav system.

Right now it is like:

<ul id="main-nav">
   <li class="menu-item">Parent Menu Item</li>
      <ul id="sub-menu">
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
      </ul>
   <li class="menu-item">Parent Menu Item</li>
      <ul id="sub-menu">
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
      </ul>
   <li class="menu-item">Parent Menu Item</li>
      <ul id="sub-menu">
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
      </ul>
</ul>

What I am looking to do is this:

<div class="main-nav-wrap">
  <div class="container main-nav">
    <ul>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>            
    </ul>
  </div>

  <div class="main-subnav">
    <div class="container">
      <div class="sub-menu">
        <h2>Some title here</h2>
        <div class="sub-container">
          <ul class="grid_3 alpha">
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
          </ul>
          <ul class="grid_3">
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
          </ul>
          <ul class="grid_3 omega">
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

score 1 · Answer 1 · answered Nov 11 '12 at 12:20

You could either try a custom walker as suggested above, or try to work it out via the number of invaluable arguments for the wp_nav_menu function. There are several parameters that you can use in order to change the container, list item ot entry classes, ids or even HTML tags. See if that would cause less troubles for adapting the standard menu to your custom variant (or would require just a cosmetic change).

How to rewrite the output of wordpress nav menu?

1 Answers1