WordPress - Custom menu item and menu link classes using nav filters

menu_item_link_classes.php

<?php
function add_menu_list_item_class($classes, $item, $args) {
  if (property_exists($args, 'list_item_class')) {
      $classes[] = $args->list_item_class;
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

function add_menu_link_class( $atts, $item, $args ) {
  if( property_exists($args, 'link_class') ) {
    $atts['class'] = $args->link_class;
  }
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
?>

Add custom classes to wp_nav_menu

This has been a long, lingering frustration of mine; wp_nav_menu allows us to add classes to containers and wrappers, but we have no option to add classes to the items and links within those containers. We're forced to use menu-item and a in our css. Here's where these neat filters come in. Add them to your theme's functions file and then reference them in your templates (typically header or footer includes) as illustrated below in the example.

wp_nav_menu(array(
    'container' => false,
    'theme_location' => 'primary',
    'menu_class' => 'navigation__items',
    'items_wrap' => '<ol class="%2$s">%3$s</ol>',
    'list_item_class' => 'navigation__item',
    'link_class' => 'navigation__item__link'
));

Reference here:

• nav_menu_css_class
• nav_menu_link_attributes