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="https://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="https://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="https://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="https://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)
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.