wp_nav_menu(), how to change <li> class?

Question

I'm building a menu for my website. The static is looking like this:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

I've been able to understand how to customized the <ul> tag, to get rid of the automatic <div> tag. But now, I want to customized the <li> tag to be able to assign different class name to control specific behavior through CSS. When I use the wp_nav_menu() the output is as follow:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

I want to get rid of the id in the <li> tags and change the class to reflect the name of the page I want to link to. Basically I want to output the the same thing as the 1st snippet of code in this post.

The reason why I doing this, is that I use custom images that is controled by my CSS insted of plain text.

Is this possible? What strategy I should use to overcome this problem?

Answer 1

Use a custom walker, remove anything you don’t need and add your classes. Here is a walker I use to get a list with clean markup: T5_Nav_Menu_Walker_Simple.

Your could also filter 'nav_menu_css_class' or 'wp_nav_menu_items'. But a walker class is easier to understand and to control in my opinion.

Answer 2

go to appearance > menus - select the menu you want - go to "screen options" at the top right, select "css classes" - add a class to each menu item..

Answer 3

Setting the <li> class to nav-link, as bootstrap 4.3 needs it:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

You can also unset the id attribute in that array.

Answer 4

This is a very simple way to call li class and "any class" replace easily. Just follow the instructions.

Use this code in the nav area.

<?php
            $consult_menu = wp_nav_menu(array(
                    'theme_location' => 'topmenu',
                    'menu_id' => 'menu',
                    'menu_class' => 'navbar-nav m-auto',
                    'echo' => false
                )
            );
            $consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
            echo $consult_menu;
            ?>

Then inspect your code on the browser. find wp default class and than replace str_replace(**"default_class_here"**,**"new_li_class_here"**,$consult_menu); | Note: $consult_menu here is my theme name, you can use any name here.

Answer 5

As the last poster mentioned, you can add your own classes via appearance > menus with CSS classes ticked in the screen options. In the walker, you can access what you enter there via:

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

I have even used this to add pre-named images in the menu - a little flakey, but it works.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">