how to change the output of wp_nav_menu using css classes

Question

When we add a class to a menu item through dashboard, the css class is added to "li" tag of that item. Is there a way to add these css classes to "a" tag of that item, instead of "li" tag?

As you can see in the picture, I want to have this effect :

<li id="menu-item-290">
    <a  class="my-class" href="http://localhost/en-wptuts/">home</a>
</li> 

instead of this one:

<li id="menu-item-290" class="my-class">
    <a href="http://localhost/en-wptuts/">home</a>
</li>

So is it possible? Thank you in advance.

Answer 1

Here are three approaches:

I - Plugin for the a-class- prefix:

We can target the <a> tags with the a-class-... class prefix.

So in your case the way to get:

<li id="menu-item-290" class="blue yellow ...">
    <a class="red pink" href="http://localhost/en-wptuts/">home</a>
</li> 

is to use the following menu classes:

blue yellow a-class-red a-class-pink

We support this with the following plugin:

<?php
/**
 * Plugin Name: Menu Link Classes (I)
 * Description: Target menu link classes with the "a-class-" class prefix.
 * Author:      Birgir Erlendsson (birgire)
 * Plugin URI:  http://wordpress.stackexchange.com/a/190844/26350
 * Version:     0.0.1
 */

/**
 * Remove menu classes with the "a-class-" prefix
 */
add_filter( 'nav_menu_css_class', function( $classes )
{
    return array_filter( 
        $classes, 
        function( $val )
        {
            return 'a-class-' !== substr( $val, 0, strlen( 'a-class-' ) );
        } 
    );
} );

/**
 * Add only "a-class-" prefixed classes to the menu link attribute
 */
add_filter( 'nav_menu_link_attributes', function( $atts, $item )
{
    if( isset( $item->classes ) )
    {
        $atts['class'] = str_replace( 
            'a-class-',
            '',
            join( 
                ' ', 
                array_filter(
                    $item->classes, 
                    function( $val )
                    {
                        return 'a-class-' === substr( $val, 0, strlen( 'a-class-' ) );
                    } 
                ) 
            )
        );
    }
    return $atts;
}, 10, 2 );

II - Plugin for the li-class- prefix:

We can also use the li-class-... class prefix to target the <li> tags instead.

So in your case the way to get:

<li id="menu-item-290" class="blue yellow">
    <a class="red pink" href="http://localhost/en-wptuts/">home</a>
</li> 

is to use the following menu classes:

li-class-blue li-class-yellow red pink

Note that this will move <li> classes to <a> that do not have this prefix.

Here's the plugin to support this:

<?php 
/**
 * Plugin Name: Menu Link Classes (II) 
 * Description: Add classes prefixed with "li-class-" to the li tag, else add it to the a tag.
 * Author:      Birgir Erlendsson (birgire)
 * Plugin URI:  http://wordpress.stackexchange.com/a/190844/26350
 * Version:     0.0.1
 */

/**
 * Only allow li classess that are prefixed with "li-class-"
 */
add_filter( 'nav_menu_css_class', function( $classes )
{
    $newclasses = [];
    foreach( (array) $classes as $class )
    {
        if( 'li-class-' === substr( $class, 0, strlen( 'li-class-' ) ) )
            $newclasses[] = str_replace( 'li-class-', '', $class );
    }
    return $newclasses;

} );

/**
 * Add all classess that aren't prefixed with "a-class-" to the <a> tag
 */
add_filter( 'nav_menu_link_attributes', function( $atts, $item )
{
    if( isset( $item->classes ) )
    {
        $atts['class'] = join( 
            ' ', 
            array_filter(
                $item->classes, 
                function( $val )
                {
                    return 'li-class-' !== substr( $val, 0, strlen( 'li-class-' ) );
                } 
            ) 
        );
    }
    return $atts;
}, 10, 2 );

III - Plugin that moves all optional classes to the <a> tag:

If we use the following optional CSS classes:

blue yellow red pink

then all will be moved to the <a> tag:

<li id="menu-item-290" class="...">
    <a class="blue yellow red pink" href="http://localhost/en-wptuts/">home</a>
</li> 

Note that non-optional classes in <li> are not moved to <a>, so that's why we keep the ... notation in the HTML example above.

Support by the following plugin:

<?php
/**
 * Plugin Name: Menu Link Classes (III)
 * Description: Move all optional classes from the li tag to the a tag.
 * Author:      Birgir Erlendsson (birgire)
 * Plugin URI:  http://wordpress.stackexchange.com/a/190844/26350
 * Version:     0.0.1
 */

/**
 * Only allow li classess that are prefixed with "li-class-"
 */
add_filter( 'nav_menu_css_class', function( $classes, $item )
{
    return array_filter( $classes, function( $val ) use ( $item )
    {
        return ! in_array( $val, (array) $item->wpse_classes ) ;
    } );
}, 10, 2 );

add_filter( 'wp_get_nav_menu_items',  function( $items, $menu, $args )
{
    foreach( $items as $item )
        $item->wpse_classes = $item->classes;

    return $items;
}, 10, 3 );

/**
 * Add all classess that aren't prefixed with "a-class-" to the <a> tag
 */
add_filter( 'nav_menu_link_attributes', function( $atts, $item )
{
    if( isset( $item->wpse_classes ) )
    {
        $atts['class'] = join( 
            ' ', 
            array_filter(
                $item->wpse_classes, 
                function( $val )
                {
                    return 'li-class-' !== substr( $val, 0, strlen( 'li-class-' ) );
                } 
            ) 
        );
    }
    return $atts;
}, 10, 2 );

Answer 2

add_filter ( 'nav_menu_css_class', 'so_37823371_menu_item_class', 10, 4 );

function so_37823371_menu_item_class ( $classes, $item, $args, $depth ){
  $classes[] = 'nav-item';

  return $classes;
}
function add_link_atts($atts) {
  $atts['class'] = "nav-link";
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');