WordPress developers frequently need to create custom menu items classes. The ability to style menu items differently, perhaps more like a button, which is becoming more and more prevalent, is made possible by using a custom class.
Custom classes for menu items are available in WordPress. The field for adding a CSS Class may need to be enabled in your screen settings if you can’t see it. When you enter your classes in this box, the <li> element of the menu item will also receive those classes.
To the anchor tag rather than the list element, these classes should occasionally be applied. Using a front-end framework like Bootstrap or icon fonts like Font Awesome, this is very crucial.
WordPress currently has the filters we need to perform this, and we only want to add and delete a few classes.
In addition, I’ve had problems with plugins that don’t function well because they assume that the menus are using the same filters as the core, which is something that is sometimes forgotten when creating a unique walker.
Also Read: Filter WordPress posts by custom taxonomy term with AJAX
You can apply your custom menu item classes to the anchor tag rather than the list item element by simply pasting the snippet below into your theme’s functions.php file.
/*-------------------------------------------*
* Get the custom item menu classes and add them to the anchor element | InCreativeWeb
*------------------------------------------*/
add_filter( 'nav_menu_link_attributes','icw_move_custom_menu_item_class_to_anchor_element', 10, 4 );
function icw_move_custom_menu_item_class_to_anchor_element( $atts, $item, $args, $depth ) {
$custom_classes = get_post_meta( $item->ID, '_menu_item_classes', true );
if ( ! empty( $custom_classes ) ) {
$atts['class'] = empty( $atts['class'] ) ? '' : $atts['class'];
$atts['class'] .= implode( ' ', $custom_classes );
}
return $atts;
}
/*-------------------------------------------*
* Remove the custom classes from the list element | InCreativeWeb
*------------------------------------------*/
add_filter( 'nav_menu_css_class', 'icw_remove_custom_menu_item_class_from_li_element', 10, 4 );
function icw_remove_custom_menu_item_class_from_li_element( $classes, $item, $args, $depth ) {
$custom_classes = get_post_meta( $item->ID, '_menu_item_classes', true );
$classes = array_diff( $classes, $custom_classes );
return $classes;
}
Author
Jayesh Patel
Jayesh Patel is a Professional Web Developer & Designer and the Founder of InCreativeWeb.
As a highly Creative Web/Graphic/UI Designer - Front End / PHP / WordPress / Shopify Developer, with 14+ years of experience, he also provide complete solution from SEO to Digital Marketing. The passion he has for his work, his dedication, and ability to make quick, decisive decisions set him apart from the rest.
His first priority is to create a website with Complete SEO + Speed Up + WordPress Security Code of standards.