I would have thought this would be a lot easier than it initially was, and in the end, it is really simple, but it took some time to figure it out, so I thought I’d pass along.

Innately WP creates menus that look something like this:

<ul id="menu-top-nav" class="menu">
<li id="menu-item-72" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-58 current_page_item menu-item-72"><a href="about-us">About Us</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-59 current_page_item menu-item-73"><a href="contact-us">Contact Us</a></li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-60 current_page_item menu-item-74"><a href="services">Services</a></li>
</ul>

I don’t know about you, but to me, that is not only bloated and ugly, it is also pretty unusable… For anyone that works in both a Development and Production environment, or has ever had to move a WP installation, those numbers will change, making any CSS really hard to write, let along readable/understandable…

What I wanted was something more like:

<ul id="menu-top-nav" class="menu">
<li id="nav-about-us" class="current_page_item"><a href="about-us">About Us</a></li>
<li id="nav-contact-us" class=""><a href="contact-us">Contact Us</a></li>
<li id="nav-services" class=""><a href="services">Services</a></li>
</ul>

Notice how the ID for each <li> is now the page slug, prefaced with nav-? Not that’s useful! I did keep the current_page_item class as that’s really useful too, but otherwise, dump that fluff!

In the end, all I needed were two very small functions, implemented via a filter:

// Reduce nav classes, leaving only 'current-menu-item'
function nav_class_filter( $var ) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
add_filter('nav_menu_css_class', 'nav_class_filter', 100, 1);

// Add page slug as nav IDs
function nav_id_filter( $id, $item ) {
return 'nav-'.cleanname($item->title);
}
add_filter( 'nav_menu_item_id', 'nav_id_filter', 10, 2 );

The nav_id_filter function makes use of a function I use pretty regularly, to create “codeable” versions of text:

function cleanname($v) {
$v = preg_replace('/[^a-zA-Z0-9s]/', '', $v);
$v = str_replace(' ', '-', $v);
$v = strtolower($v);
return $v;
}

This just removes anything that isn’t alpha-numeric, converts spaces to dashes, and makes everything lowercase; basically converts any string into a “slug”. Probably a better way to write that, but it works…

I’ll likely push this as a Plug-in, again, because it seems really useful, but wanted to make it available to anyone else trying to do the same…

Cheers,
Atg

Top⇪