0

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

<?php 
              $args = [
                'theme_location' => 'header-menu',
                'container'      => 'ul',
                'container_class'=> '',
                'menu_class'     => 'mainnav-section'
              ];
              wp_nav_menu($args);
          ?>

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>
        </ul>
    </li>
    <li id="menu-item-513" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-513">
        <a href="http://#">Innovations</a>
    </li>
</ul>

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.

0

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 Sep 10 '18 at 12:25
  • @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 Sep 10 '18 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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