WordPress

Filter to add new css class to li elements

Are you trying to add new class to li elements of the WP menu?

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

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.

Views: 192

Standard