I'm a newbie to WordPress core and development process. As I have a little knowledge of WordPress functions. But I need the help from you guys.

Actually, i'm developing my first theme and i already have the CSS for my menu. The menu has been registered in functions.php.

I've used the code posted below to add my class "mainnav-section".

              $args = [
                'theme_location' => 'header-menu',
                'container'      => 'ul',
                'container_class'=> '',
                'menu_class'     => 'mainnav-section'

And it executed this.

<ul id="menu-header" class="mainnav-section">
    <li id="menu-item-511" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-511">
        <a href="http://#">Latest</a>
        <ul class="sub-menu">
            <li id="menu-item-512" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-512">
                <a href="http://#">HardFork</a>
    <li id="menu-item-513" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-513">
        <a href="http://#">Innovations</a>

All I want to to do is to add my CSS class to main-menu items, sub-menu and list items. Because I have the CSS and JS completed to get the desired menu.

  • 1
    You have to customize the Walker_Nav_Menu
    – benny-ben
    Commented Sep 8, 2018 at 21:17
  • What are the classes you need to add and where?
    – benny-ben
    Commented Sep 8, 2018 at 21:20

1 Answer 1


The below will add a class called class-here to all menu items:

 * Filters the CSS class(es) applied to a menu item's list item element.
 * @param array    $classes The CSS classes that are applied to the menu item's `<li>` element.
 * @param WP_Post  $item    The current menu item.
 * @param stdClass $args    An object of wp_nav_menu() arguments.
 * @param int      $depth   Depth of menu item. Used for padding.
 * @return Array $classes
function theme_prefix_nav_menu_css_class( $classes, $item, $args, $dpeth ) {

    $classes[] = 'class-here';

    return $classes;

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

You could add this to your themes functions.php file. There's a bunch of other hooks when the WordPress WP Nav Walker creates the menus - Check out The Code Reference

  • @howdy-mcgee i want to add the class to mainmenu item submenu and its items. <br> <li class="mainmenu item"> Google</li> <ul class=sub-menu> <li>Google sub-menu item1</li> <li>Google sub-menu item2</li> <li>Google sub-menu item3</li> </ul>
    – tassawarr
    Commented Sep 10, 2018 at 12:25
  • 1
    @tassawarr The above code will add the class to all mainmenu items and all submenu items - Your comment has the classes incrementing which isn't in your original question, is that just an example or are you specifically looking for an incrementing class?
    – Howdy_McGee
    Commented Sep 10, 2018 at 14:18

Your Answer

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

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