walker - How to add class to parent a tag with a sub menu

I have been trying to add a class to the parent a tag of a sub menu using a custom walker. The current walker I am using adds the class to the parent <li>, does anybody know how to adjust this to add the class to the parent <a> tag instead.

Here is the existing walker I am using:

class My_Walker_Nav_Menu extends Walker_Nav_Menu{
  public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
    $id = $this->db_fields['id'];    

    if(isset($children[$el->$id]))
      $el->classes[] = 'toggle-sub-nav closed';    

    parent::display_element($el, $children, $max_depth, $depth, $args, $output);
  }
}

Here is the code that is output:

Here is the code that I am aiming for:

I have been trying to add a class to the parent a tag of a sub menu using a custom walker. The current walker I am using adds the class to the parent <li>, does anybody know how to adjust this to add the class to the parent <a> tag instead.

Here is the existing walker I am using:

class My_Walker_Nav_Menu extends Walker_Nav_Menu{
  public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
    $id = $this->db_fields['id'];    

    if(isset($children[$el->$id]))
      $el->classes[] = 'toggle-sub-nav closed';    

    parent::display_element($el, $children, $max_depth, $depth, $args, $output);
  }
}

Here is the code that is output:

Here is the code that I am aiming for:

• menus
• walker

Share Improve this question edited Feb 9, 2014 at 14:41 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Feb 9, 2014 at 13:45 Ashley BriscoeAshley Briscoe 13333 silver badges77 bronze badges 7

• Any specific reason for that? You can always add the class to the parent li and apply CSS rules to the nested a using .toggle-sub-nav > a {. – Abhik Commented Feb 9, 2014 at 14:05
• Hi, I am converting a responsive html/css/jquery template I built to wordpress and I require a class applied to that tag. – Ashley Briscoe Commented Feb 9, 2014 at 14:07
• You can use jQuery .hasClass() to check if the parent li has the menu-item-has-children class and if it does add your classes to the nested a using .addClass(). – Abhik Commented Feb 9, 2014 at 14:15
• Thank you. Ideally I would like this handled by php, do you know how to do this? – Ashley Briscoe Commented Feb 9, 2014 at 14:16
• 1 Please don't post screenshots of code. Post the actual code (current/desired) as edit to your question. – kaiser Commented Feb 9, 2014 at 15:17

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

You can simply add this code snippet in your theme's functions.php file.

/* Add classes and other attributes to the anchor tags if list item is a parent */

add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 );

function add_class_to_items_link( $atts, $item, $args ) {
  // check if the item has children
  $hasChildren = (in_array('menu-item-has-children', $item->classes));
  if ($hasChildren) {
    // add the desired attributes:
    $atts['class'] = 'your-custom-class'; //This is the main concern according to the question
    $atts['id'] = 'your-custom-id'; //Optional
    $atts['data-toggle'] = 'dropdown'; //Optional
    $atts['data-target'] = '#'; //Optional
  }
  return $atts;
}