How to remove every Class and ID from WordPress wp_nav_menu

The WordPress wp_nav_menu() function comes default with almost every WordPress Theme. This function displays a navigation menu which allows you to navigate to most part of your website, eg: Home – Blog – Contact etc.

wp_nav_menu() comes with default IDs and Classes for easy styling of the menu such as:

• class=”menu-main-container“
• id=”primary-menu“
• class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-80“
• class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-71 current_page_item current_page_parent menu-item-82“
• class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-81“

This doesn’t look pleasant right.

Sometimes you may want to make your wp_nav_menu a little cleaner . By adding the below code into your function.php , this should remove all the nasty classes and id

//Remove all classes and ID from Nav Menu
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);