How to Remove the Default Classes and ID From Wp Nav Menus, but Keep Your Custom Classes

If you love lean code and also love WordPress, you’re no doubt often in search of ways to remove some of the multitude of CSS classes it adds to a variety of elements created by native WP functions.

One of the culprits you may find most egregious in this effort, is wp_nav_menu(). It’s a great function, and allows folks in the WP Admin area to control their navigation menus…we just don’t need all of the code it outputs.

Jump to…

For example, here is one li item as output by that function.


<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-456 current_page_item menu-item-346"><a href="https://website.com/page/" aria-current="page">Page</a></li>

Let’s see what we can do to tone it down a bit.

Remove All Default CSS Classes from WP Nav Menu

lot of CSS classes. Let’s remove them all, but adding this to our functions.php file:


add_filter('nav_menu_css_class', 'cn_remove_native_wp_menu_classes', 10, 2);
function cn_remove_native_wp_menu_classes($classes, $item) {
return (array)get_post_meta( $item->ID, '_menu_item_classes', true );
}

Now, our same li code above shrinks down to this:


<li id="menu-item-123"><a href="https://website.com/page/" aria-current="page">Page</a></li>

Well, that’s significantly better! And note, while this removes the native classes, it will leave your custom CSS classes in place, i.e. those you added via the Appearance > Menus page in WP Admin.

But we can still improve…

Remove the ID From WP Nav Menu List Items

In most modern schools of thought, IDs are meant to be used for things like Javascript or link anchors, and not for CSS selectors. The idea here is that, once you use an ID as a CSS selector, you’ve elected to a specificity that is going to be more difficult to overcome should you need to tweak later. Feel free to search on that concept more, we’re not going to get into it much more here.

To remove the default, fairly meaningless ID in your WP Nav Menu list items, add this to your functions.php:


add_filter('nav_menu_item_id', 'cn_remove_menu_ids', 10, 3);
function cn_remove_menu_ids($id, $item, $args) {
return '';
}

Now let’s take a look at our list item:


<li><a href="https://website.com/page/" aria-current="page">Page</a></li>

That’s nice.

Programmatically Add Additional Custom CSS Classes to WP Nav Menu List Items

Take a look at the code below, which would be added to your functions.php


add_filter('nav_menu_css_class', 'clear_nav_menu_item_class', 10, 3);
function clear_nav_menu_item_class($classes, $item, $args) {
if ( $item->url == get_site_url().'/search/' ) {
$classes[] = 'toggle-search';
}
if ( $item->url == get_permalink() ) {
$classes[] = 'current-page';
}
return $classes;
}

Let’s break some of it down:


if ( $item->url == get_site_url().'/search/' ) {
$classes[] = 'toggle-search';
}

The code above says “if the list item’s a tag points to a page with the URL /search/, add the toggle-search class.

We also removed the current_page_item in our first code snippet above, but that can be useful. Let’s put it back, but use a slighty different class.


if ( $item->url == get_permalink() ) {
$classes[] = 'current-page';
}

That just compares the list item’s link / URL to the current page’s URL. If they’re the same, add the class current-page to that list item.

You can get endlessly creative there, of course. Let me know if you’d like to see any more examples in the comments below!

All of the Code Above


add_filter('nav_menu_item_id', 'cn_remove_menu_ids', 10, 3);
function cn_remove_menu_ids($id, $item, $args) {
return '';
}

add_filter('nav_menu_css_class', 'cn_remove_native_wp_menu_classes', 10, 2);
function cn_remove_native_wp_menu_classes($classes, $item) {
return (array)get_post_meta( $item->ID, '_menu_item_classes', true );
}

add_filter('nav_menu_css_class', 'cn_clear_nav_menu_item_class', 10, 3);
function cn_clear_nav_menu_item_class($classes, $item, $args) {
if ( $item->url == get_site_url().'/search/' ) {
$classes[] = 'toggle-search';
}
if ( $item->url == get_permalink() ) {
$classes[] = 'current-page';
}
return $classes;
}

Up Next: How to Create a Woocommerce Product Rating Overview