1

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:

screen shot of current code output

Here is the code that I am aiming for:

Screen shot of desired code output with class applied to the a tag

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
    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. 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
    Feb 9, 2014 at 14:15
  • Thank you. Ideally I would like this handled by php, do you know how to do this? 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
    Feb 9, 2014 at 15:17

1 Answer 1

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;
}
1
  • HI, welcome on WPSE. You should edit your answer and add more content as source code to understand your solution. Why and how it works.
    – bueltge
    Jan 10, 2019 at 8:53

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.