remove class "sub-menu" from wordpress drop down menu

Question

I am building a wordpress website with dynamic wordpress menu + one level drop down menu (sub menu). since my drop down is a bit tricky and required special CSS I tried to remove the styling that wordpress automatically gives to menus by using this code:

function wp_nav_menu_remove_attributes( $menu ){
    return $menu = preg_replace('/ id=\"(.*)\" class=\"(.*)\"/iU', '', $menu );
}
add_filter( 'wp_nav_menu', 'wp_nav_menu_remove_attributes' );

The code works pretty fine and removes all the stlying from the UL menu and leave pure UL LI HTML. Now. my drop down is a bit tricky and require special css. I was looking all over the web for an option which removes the class="sub-menu" completely from the ul and gives me the option to dynamically wrap this sub menu UL with a special DIV and give it a class (that accomplished using jquery)

to try demonstrating what I am trying to accomplish please look at the follwoing HTML:

<div class="navigation">
  <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a>
      <div class="sub-nav"> 
      <span>&nbsp;</span>
        <ul>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>
</div>

explanation:

1. There is a main DIV with a class called: "navigation"
2. inside just a simple menu (ul li a)
3. drop down wrapped with a div with a class called: "sub-nav"
4. before the ul of the sub menu comes a span tag (that I am echoing using jquery)

this is what actually happens:

<div class="navigation">
  <ul>
    <li><a href="http://localhost/tusso/">link</a></li>
    <li><a href="http://localhost/tusso/?cat=1">link</a>
      <ul class="sub-menu">
        <span>&nbsp;</span>
        <li><a href="http://localhost/tusso/?cat=1">link</a></li>
        <li><a href="http://localhost/tusso/?cat=1">link</a></li>
      </ul>
    </li>
    <li><a href="http://localhost/tusso/?cat=1">link</a></li>
    <li><a href="http://localhost/tusso/?cat=1">link</a></li>
  </ul>
</div>

I cant get rid of: what so ever. tried many solutions. nothing worked. please help.

Thanks, Gil

Answer 1

For anybody interested in the code to remove any class you want. I Just worked with the Roots theme and they did the replacement like below. You can just add the class you want to replace in the list.

/**
 * Replace various active menu class names with "active" or nothing
 *
 */

function roots_wp_nav_menu($text) {
  $replace = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active',
    'menu-item-type-post_type' => '',
    'menu-item-object-page' => '',
  );

  $text = str_replace(array_keys($replace), $replace, $text);
  return $text;
}

add_filter('wp_nav_menu', 'roots_wp_nav_menu');

Answer 2

Create a custom Walker to output your menu in whatever markup you require. Look in wp-includes/nav-menu-template.php at the default nav menu walker, the start_lvl function is where the sub-menu class is inserted.