19

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?

1

5 Answers 5

16

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.

3
  • Thanks Toscho, I just find that in the new version of Wordpress (3.3) we can add custom class fir each menu items wich kind of solve my problem. I tried the script you suggested to me (T5_Nav_Menu_Walker_Simple) which does strip everything from the <li>, how can we control which elements we want to keep?
    – Christian
    Dec 26, 2011 at 21:20
  • 1
    @Christian You can change the walker as you need, it is just a very basic example. To see which information is available, add a print_r( $item, TRUE ) to each li. Then decide what to do with it. :)
    – fuxia
    Dec 26, 2011 at 22:44
  • This pointed me in the right direction, what I needed was the wp_nav_menu, but I needed to change the 'container_class' parameter, to work for my particular use case, where I on some condition swapped the main menu for another one, but needed the classes to be consistent for css.
    – D. Dan
    Jan 25, 2018 at 15:16
10

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..

2

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.

1

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.

0

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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.