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

share|improve this question
    
If your CSS stops working because of that class, then the problem is in your CSS. You are most likely not using selectors the best way –  onetrickpony May 14 '12 at 16:17
add comment

2 Answers

up vote 2 down vote accepted

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');
share|improve this answer
    
Great snippet @Robert Bouten. Thanks –  gil hamer Aug 18 '12 at 17:09
add comment

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.

share|improve this answer
    
Thanks a lot. I managed to do it another way finally. I appreciate all the help –  gil hamer May 21 '12 at 6:26
    
@gilhamer share the code in your own answer then? It will be helpful to others :) –  its_me Jul 17 '12 at 11:18
add comment

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.