0

I'm creating a menu that will have sub-menu > sub-menu > sub-menu. The styling is really involved so ideally I could rename the class name "sub-menu" based off what level of sub-menu it is or at least add a class (ie 1st sub-menu add .top-sub-menu, 2nd sub-menu add .second-level-sub-menu, 3rd sub-menu add .third-level-sub-menu).

  1. Is there any way to do this in WP core?
  2. If not, are what would be the best way to achieve this result?

I attached the html of what I've got going on if that helps. Any help is much appreciated. Thanks!

enter image description here

Improve this question
4
  • 1
    have you tried any of these solutions? https://stackoverflow.com/questions/5034826/wp-nav-menu-change-sub-menu-class-name
    – Mari
    Commented Apr 25, 2023 at 15:47
  • @Mari Hi, yes, this allows me to add a class to all instances of sub-menu but not to add different class names to nested sub-menu.
    – Kyle Klaiber
    Commented Apr 25, 2023 at 15:53
  • the first answer in the question Mari linked to contains the $depth of the menu items which is exactly what you're asking about, anybody with basic beginner level PHP skills can use an if statement to check its value and return a different class. The answer by vralle even uses the depth to add a class with the depth value and does it in a filter that can be added to any menu. Note that any answer you got here would not be a copy paste solution
    – Tom J Nowell ♦
    Commented Apr 25, 2023 at 16:28
  • @Mari I was actually able to use Artemiy Egorov's answer on that post. Thanks!
    – Kyle Klaiber
    Commented Apr 25, 2023 at 17:08

1 Answer 1

Reset to default
0

I was able to work this out by using a hook that I grabbed from Artemiy Egorov's answer on this post https://stackoverflow.com/questions/5034826/wp-nav-menu-change-sub-menu-class-name so I figured I'd share in case someone else needs it too:

add_filter( 'nav_menu_submenu_css_class', 'rename_sub_menus', 10, 3 );
function rename_sub_menus( $classes, $args, $depth ){
    foreach ( $classes as $key => $class ) {
    if ( $class == 'sub-menu'  && $depth == 0) {
        $classes[ $key ] = 'first-level-sub-menu';
    } else if ( $class == 'sub-menu'  && $depth == 1) {
      $classes[ $key ] = 'second-level-sub-menu';
    } else if ( $class == 'sub-menu'  && $depth == 2) {
      $classes[ $key ] = 'third-level-sub-menu';
    }
}

return $classes;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.