wordpresswordpress-themingwp-nav-walkerwp-nav-menu-item

How to add Class in <li> using wp_nav_menu() in Wordpress?


I am using wp_nav_menu($args) and I want to add my_own_class CSS classname to the <li> element.

I'd like to get the following result:

<li class='my_own_class'><a href=''>Link</a>

How to do that?


Solution

  • You can't add a class directly to the LIs very easily, but is there any reason not to target them in a slightly different but equally specific way (by their parent ul)?

    You can set the class or ID of the menu with the menu_class and menu_id parameters (affixed to the UL parent of the LIs) and then target the li's via CSS that way, like so:

    <?php wp_nav_menu('menu_id=mymenu'); ?>
    

    And for CSS:

    ul#mymenu li {
        /* your styles here */
    }
    

    Edit: At the time of writing in 2013 this was the easiest way to add it, but updates since then have added the feature to add CSS classes directly in the admin navigation editor. See more recent answers for details.