Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like to add the CSS class of the current menu item (and the classes of its parents & ancestors) to the current page body classes.

For example, if the current menu item has a CSS class "products" (as defined in Appearance | Menus), then the body for the corresponding page should also have the class "products".

If that makes sense to anyone, any ideas how to do it?

I've looked at "How to add current, parent, and ancestor menu item IDs to body_class()?" but can't get those ideas to work in my case.

share|improve this question

2 Answers 2

In the answer you linked, do a var_dump($dosmenu); just above the line _wp_menu_item_classes_by_context( $dosmenu );. That variable should be already initialised with the classes you want.

After that you can adapt the foreach loop accordingly & use that function as a filter to body_class.

The classes set in the admin are stored as a post meta with key _menu_item_classes which are automatically initialised in the call to wp_get_nav_menu_items

share|improve this answer
    
Thanks, that gave me sufficient hints to reach a working solution, although it's not perfect. I'll post my function as a separate answer. –  dvd3141 Dec 9 '12 at 21:33

This is what I managed to cobble together thanks to Mridul Aggarwal's hints:

function pa_assign_menu_class_to_body(){
  // 'main' is the theme_location, set earlier using register_nav_menus()
  $menu_name = 'main';
  $class_list = array();

  if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    // _wp_menu_item_classes_by_context() adds current, current_item_parent and current_item_ancestor to the appropriate arrays in the provided variable
    _wp_menu_item_classes_by_context( $menu_items );

    $classes = array();

    foreach($menu_items as $menu_item) {
      if ($menu_item->current == 1) {
        $classes['current'] = $menu_item->classes;
      }
      if ($menu_item->current_item_parent == 1) {
        $classes['parents'] = $menu_item->classes;
      }
      if ($menu_item->current_item_ancestor == 1) {
        $classes['ancestors'] = $menu_item->classes;
      }
    }

    // create a one-dimensional array of unique classes
    foreach($classes as $class) 
      foreach ($class as $cls) $class_list[] = $cls;
    $class_list = array_values(array_unique($class_list));
  }
  // if, for some reason, we have no results, we need to assign a default class otherwise WordPress complains
  if (empty($class_list)) $class_list[] = 'default';
  return $class_list;
}
add_filter( 'body_class', 'pa_assign_menu_class_to_body');

This function does a little too much, because it adds all the menu-item-type classes too. All I really want is the custom CSS classes which the user has entered into the CSS Classes field in the WordPress menus admin screen. Any thoughts on how to extract only those classes would be most welcome.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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