WordPress.org

Forums

I want to add class to the menu item link in wordpress (4 posts)

  1. syed12
    Member
    Posted 9 months ago #

    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.

  2. photocurio
    Member
    Posted 7 months ago #

    did you solve your problem? I also want to add classes to the anchors in menu items.

  3. simonday
    Member
    Posted 7 months ago #

    no still waiting...

  4. syed12
    Member
    Posted 7 months ago #

    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

Reply

You must log in to post.

About this Topic