WordPress.org

Support

Support » Themes and Templates » I want to add class to the menu item link in wordpress

I want to add class to the menu item link in wordpress

  • Hello I am converting a HTML5 template to wordpress. In the html template, i have added classes to the <a> links of menu items which have sub menus. I know we can add classes to the menu item’s <li> in wordpress but i want to add class in the <a> in the <li> in wordpress menu item. So currently wordpress output is

    <ul class="nav navbar-nav pull-right">
    <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children primary menu-item-4"><a href="http://localhost/wordpress/">Home</a>
    <ul class="subMenu" style="display: none;">
    	<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5"><a href="http://localhost/wordpress/sample-page/">Sample Page</a></li>
    	</ul>
    </li>
    
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">Link</a></li>
    
    <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Link</a></li>
    </ul>

    and the output i want is

    <ul class="nav navbar-nav pull-right">
    <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children primary menu-item-4"><a class="firstLevel hasSubMenu" href="http://localhost/wordpress/">Home</a>
    <ul class="subMenu" style="display: none;">
    	<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5"><a href="http://localhost/wordpress/sample-page/">Sample Page</a></li>
    </a></li>
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"></a><a href="#">Link</a>
    
    <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Link</a>

    As you can see in the output which i want there is “Home” menu item, I have added class="firstLevel hasSubMenu" in the <a> for the “Home” menu item
    <li>.

    I have this code added in my theme’s “functions.php” for adding class to the menu items which have sub menus <li>

    function menu_set_dropdown( $sorted_menu_items, $args ) {
        $last_top = 0;
        foreach ( $sorted_menu_items as $key => $obj ) {
            // it is a top lv item?
            if ( 0 == $obj->menu_item_parent ) {
                // set the key of the parent
                $last_top = $key;
            } else {
                $sorted_menu_items[$last_top]->classes['hasSubMenu'] = 'hasSubMenu';
            }
        }
        return $sorted_menu_items;
    }
    add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );

    Any help will be highly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • did you solve your problem? I also want to add classes to the anchors in menu items.

    no still waiting…

    Luckily the theme which i was converting into wordpress was built using bootstrap. And there was a php class available to add class to anchor tag but it was only for themes built using bootstrap. Click Here to check the class on github. Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘I want to add class to the menu item link in wordpress’ is closed to new replies.
Skip to toolbar