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

  • 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 '14 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 Feb 9 '14 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 '14 at 14:15
  • Thank you. Ideally I would like this handled by php, do you know how to do this? – Ashley Briscoe Feb 9 '14 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 '14 at 15:17
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;
}
  • 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 at 8:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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