wp_nav_menu remove class and id from li

4 comments

1. If you look in the wp_nav_menu() function, you see the items are written by walk_nav_menu_tree(), which calls Walker_Nav_Menu to do the work (unless you specified your own walker class). This class contains a method start_el() that is called for each menu item. In this function, you see that the classes are filtered through nav_menu_css_class and the id is filtered through nav_menu_item_id. So if you attach your own code to these hooks, you can change them to anything you want.

   Submenus are always wrapped with <ul class="sub-menu">, the main wrapper can be changed via the menu_id and menu_class arguments.

   Log in to Reply

2. You can change the id and class of each item with the nav_menu_item_id and nav_menu_css_class filter hooks like so:

   add_filter('nav_menu_item_id', 'clear_nav_menu_item_id', 10, 3);
   function clear_nav_menu_item_id($id, $item, $args) {
       return "";
   }
   
   add_filter('nav_menu_css_class', 'clear_nav_menu_item_class', 10, 3);
   function clear_nav_menu_item_class($classes, $item, $args) {
       return array();
   }
   

   This will result in items saying <li id="" class="">. The same mechanism can be used to set IDs to something useful, such as the page slug.

   Log in to Reply

3. 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' );
   

   Log in to Reply

4. This solution was posted on wp3layout .You should add this to your theme’s function.php

    
   function remove_css_id_filter($var) {
       return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
   } 
   add_filter( 'page_css_class', 'remove_css_id_filter', 100, 1);
   add_filter( 'nav_menu_item_id', 'remove_css_id_filter', 100, 1);
   add_filter( 'nav_menu_css_class', 'remove_css_id_filter', 100, 1);
   

   Hope this helps.

   Log in to Reply