Remove redundant CSS selector id or class output from WordPress menu

Most WordPress themes now use wp_nav_menu() to add menus. This function will output many CSS selectors by default, such as the following code:

1
2
3
< li  id = "menu-item-6"  class = "menu-item menu-item-type--item-object-custom current-menu-item current_page_item menu-item-home menu-item-6" >< a  href = "https://www.wpdaxue.com/" > University Homepage < / a >< / li > 
< li  id = "menu-item-13"  class = "menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13" >< a  href = "https://www.wpdaxue.com/news" > WordPress News < /a >< / li > 
< li  id = "menu-item-8"  class = "menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8" >< a  href = "https ://www.wpdaxue.com/themes" > WordPress  < / a >< / li >

It’s a headache, if you want to remove all css selectors, you can add the following code to the theme’s functions.php:

1
2
3
4
5
6
7
8
9
10
/**
 * Remove the redundant CSS selector from the menu
 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html
 * / 
The add_filter ( 'nav_menu_css_class' ,  'my_css_attributes_filter' ,  100 ,  . 1 ) ; 
the add_filter ( 'nav_menu_item_id' ,  'my_css_attributes_filter' ,  100 ,  . 1 ) ; 
the add_filter ( 'page_css_class' ,  'my_css_attributes_filter' ,  100 ,  . 1 ) ; 
function my_css_attributes_filter ( $var )  { 
	return  is_array ( $var ) ? array ( )  :  '' ; 
}

The output effect is as follows, which is simplified enough:

1
2
3
< li >< a  href = "https://www.wpdaxue.com/" > University Homepage < / a >< / li > 
< li >< a  href = "https://www.wpdaxue.com/news" > WordPress Information < / a >< / li > 
< li >< a  href = "https://www.wpdaxue.com/themes" > WordPress theme < / a >< / li >

However, you may want to consider defining certain styles of the current menu, such as highlighting the current menu, then you need to retain some CSS selectors to define the current menu. There are 4 commonly used selectors for the current menu:

  • current-post-ancestor
  • current-menu-ancestor
  • current-menu-item
  • current-menu-parent

So as long as we don’t them, we can refer to the following code:

If you want to keep more CSS classes, you can modify the array in line 9 of the following code.

1
2
3
4
5
6
7
8
9
10
/**
 * Remove the redundant CSS selector from the menu
 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html
 * / 
The add_filter ( 'nav_menu_css_class' ,  'my_css_attributes_filter' ,  100 ,  . 1 ) ; 
the add_filter ( 'nav_menu_item_id' ,  'my_css_attributes_filter' ,  100 ,  . 1 ) ; 
the add_filter ( 'page_css_class' ,  'my_css_attributes_filter' ,  100 ,  . 1 ) ; 
function my_css_attributes_filter ( $var )  { 
	return  is_array ( $var ) ? array_intersect ( $var ,  array ( 'current-menu-item' , 'current-post-ancestor' , 'current-menu-ancestor' , 'current-menu-parent' ) )  :  '' ; 
}

In this way, if you are currently visiting the of WordPress University, the output code is:

1
2
3
< li  class = "current-menu-item" >< a  href = "https://www.wpdaxue.com/" > University Homepage < / a >< / li > 
< li >< a  href = "https:/ /www.wpdaxue.com/news" > WordPress News < / a >< / li > 
< li >< a  href = "https://www.wpdaxue.com/themes" > WordPress theme < / a >< / li >

Keep class=”current-menu-item” and add styles to this class.