wp_nav_menu() function: How to remove Classes and IDs

In this post you will learn how to remove all default class and IDs from the wp_nav_menu(). 

The WordPress wp_nav_menu() function comes default with almost every Free 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“

The default classes and IDs help developers to style the menu of their WordPress Themes or websites. Truth be told, all of these classes and IDs do not make sense during the styling of the theme in some cases, you can still apply styling to your menu items without them.

Moreover when you check the page source they don’t look pleasant and sometimes you may want to cleanup your codes a bit which includes cleaning up the wp_nav_menu() function.

As you can see from the above image, a screenshot of the page source looks nasty with all those long classes and IDs. However, after cleaning up the wp_nav_menu(), the image below shows a more cleaner manu. There is also a way to add custom class and ID to the wp_nav_manu() function which will be discussed later on.

By adding the below code into your function.php  this should remove all the nasty classes and id from your wp_nav_menu

  //Remove all classes and IDs from Nav Menu
  function wp_nav_menu_remove($var) {
     return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
  }
  add_filter('page_css_class', 'wp_nav_menu_remove', 100, 1);
  add_filter('nav_menu_item_id', 'wp_nav_menu_remove', 100, 1);
  add_filter('nav_menu_css_class', 'wp_nav_menu_remove', 100, 1);