Incorrect class for current page ancestor in _menus.scss

[aziznatour]

The following is incorrect: .current_page_ancestor > a
File: /sass/navigation/_menus.scss
Line: 68

.current_page_item > a,
.current-menu-item > a,
.current_page_ancestor > a,
.current-menu-ancestor > a {
}

It should be .current-page-ancestor > a (hyphens instead of underscore)

[bahiirwa]

@aziznatour Did you have a look at #1031?

[aziznatour]

@bahiirwa I have now. Why does WordPress generate a hyphened class if it's supposed to be underscores? I'm confused.

[bahiirwa]

Been looking into this. Maybe you can look into the differences here.
https://developer.wordpress.org/reference/functions/wp_nav_menu/#current-page-ancestor-menu-items vs https://developer.wordpress.org/reference/functions/wp_list_pages/#menu-item-css-classes

[aziznatour]

WordPress 4.7.1
File: wp/wp-includes/nav-menu-template.php
Line: 474

{
   $classes[] = empty( $queried_object->taxonomy ) ? 'current-' . $queried_object->post_type . '-ancestor' : 'current-' . $queried_object->taxonomy . '-ancestor';
}

This seems to be the code responsible for outputting the class in wp_nav_menu() and it is indeed hyphenated.

The underscore one is for wp_page_menu():

if ( 'post_type' == $parent_item->type && 'page' == $parent_item->object ) {
   // Back compat classes for pages to match wp_page_menu()
   if ( in_array('current-menu-parent', $classes) )
      $classes[] = 'current_page_parent';
   if ( in_array('current-menu-ancestor', $classes) )
      $classes[] = 'current_page_ancestor';
}

I'm not sure if the docs are inaccurate or if something is being overridden :|

[joshmcrty]

@aziznatour @bahiirwa I'm not sure what the issue here is. wp_nav_menu() falls back to wp_page_menu() by default if the site admin hasn't set up a custom menu (see https://developer.wordpress.org/reference/functions/wp_nav_menu/#usage), so it's important to include selectors (hyphens and underscores) for both functions' output in the CSS/Sass. That way the menu looks correct in either situation.

[aziznatour]

@joshmcrty that sounds like the ideal solution, maybe something as the following:

.current_page_item,
.current-page-item,
.current_menu_item,
.current-menu-item,
.current_page_ancestor,
.current-page-ancestor,
.current_menu_ancestor,
.current-menu-ancestor {
   a {
   }
}

[bahiirwa]

+1 for the solution.

[joshmcrty]

@aziznatour @bahiirwa actually I was saying that the ideal solution is already in place. All .current…item and .current…ancestor selectors that either function might output are already accounted for, so this issue can be closed.

[davidakennedy]

Thanks for opening this issue @aziznatour! As @joshmcrty mentioned, this is already accounted for and not a problem, so I'll close this out.