Most of us are familiar with adding class from the dashboard that follows :
1. In Appearance > Menus, click the screen Option Tab
2. Under Show advanced menu properties, check CSS Classes
3. Expand any menu item to see the css class text input field
4. Enter desired class name and save menu to apply the class to the menu item
If you are searching for an option to get rid of editing each menu items to add same custom class to all in the menu items, you can go for filter
|
1 2 3 4 5 6 7 |
function app_nav_items_class( $classes, $item, $args ) { if ( 'primary' === $args->theme_location) { $classes[] = "list-inline-item"; } return $classes; } add_filter( 'nav_menu_css_class' , 'app_nav_items_class' , 10, 4 ); |
Where,
- $classes is an array of the CSS classes that are applied to the menu item’s element,
- $item is the current menu item,
- $args is an object of wp_nav_menu() arguments,
- $depth is Depth of menu item
To learn more about the filter, please can refer the codex.
Hits: 5