Use the page slug as the menu item ID

To make it easier to style WordPress menu items via CSS, you can automatically apply the page slug as an ID to the <li> item. Paste the following into your functions.php file:

function cleanname($v) {
$v = preg_replace('/[^a-zA-Z0-9s]/', '', $v);
$v = str_replace(' ', '-', $v);
$v = strtolower($v);
return $v;
function nav_id_filter( $id, $item ) {
return 'nav-'.cleanname($item->title);
add_filter( 'nav_menu_item_id', 'nav_id_filter', 10, 2 );

And now you should see the new ID’s being applied to your list items in the source code: