0

I'm using this simple function to add a dropdown indicator to my menu. However, I am getting a dropdown indicator on all children of the <li> that has the class menu-item-has-children. How do I change this so it only shows the indicator on the parent menu item?

add_filter( 'nav_menu_link_attributes', 'wpse154485_add_aria_haspopup_atts', 10, 3 );
function wpse154485_add_aria_haspopup_atts( $atts, $item, $args ) {
  if (in_array('menu-item-has-children', $item->classes)) {
    $args->link_after = "</span><span class='caret'><i class='dropdown-indicator'></i></span>";
  }
  return $atts;
} 

Edit: As requested, here is a vardump of one of the menu items that I do not want to show the dropdown indicator (but which currently is showing it).

object(WP_Post)#1695 (47) {
  ["ID"]=>
  int(9775)
  ["post_author"]=>
  string(1) "1"
  ["post_date"]=>
  string(19) "2017-01-11 00:23:04"
  ["post_date_gmt"]=>
  string(19) "2017-01-11 05:23:04"
  ["post_content"]=>
  string(0) ""
  ["post_title"]=>
  string(18) "Blog"
  ["post_excerpt"]=>
  string(0) ""
  ["post_status"]=>
  string(7) "publish"
  ["comment_status"]=>
  string(6) "closed"
  ["ping_status"]=>
  string(6) "closed"
  ["post_password"]=>
  string(0) ""
  ["post_name"]=>
  string(16) "blog"
  ["to_ping"]=>
  string(0) ""
  ["pinged"]=>
  string(0) ""
  ["post_modified"]=>
  string(19) "2017-01-25 10:38:11"
  ["post_modified_gmt"]=>
  string(19) "2017-01-25 15:38:11"
  ["post_content_filtered"]=>
  string(0) ""
  ["post_parent"]=>
  int(0)
  ["guid"]=>
  string(29) "http://localhost:8888/?p=9775"
  ["menu_order"]=>
  int(5)
  ["post_type"]=>
  string(13) "nav_menu_item"
  ["post_mime_type"]=>
  string(0) ""
  ["comment_count"]=>
  string(1) "0"
  ["filter"]=>
  string(3) "raw"
  ["db_id"]=>
  int(9775)
  ["menu_item_parent"]=>
  string(4) "9779"
  ["object_id"]=>
  string(4) "9772"
  ["object"]=>
  string(4) "page"
  ["type"]=>
  string(9) "post_type"
  ["type_label"]=>
  string(4) "Page"
  ["url"]=>
  string(34) "http://localhost:8888/blog/"
  ["title"]=>
  string(18) "Blog"
  ["target"]=>
  string(0) ""
  ["attr_title"]=>
  string(0) ""
  ["description"]=>
  string(0) ""
  ["classes"]=>
  array(4) {
    [0]=>
    string(0) ""
    [1]=>
    string(9) "menu-item"
    [2]=>
    string(24) "menu-item-type-post_type"
    [3]=>
    string(21) "menu-item-object-page"
  }
  ["xfn"]=>
  string(0) ""
  ["extended_activate"]=>
  string(0) ""
  ["highlight_menu"]=>
  string(0) ""
  ["extended_columns"]=>
  string(0) ""
  ["extended_heading"]=>
  string(0) ""
  ["extended_disable_link"]=>
  string(0) ""
  ["extended_text_chk"]=>
  string(0) ""
  ["extended_free_text"]=>
  string(0) ""
  ["current"]=>
  bool(false)
  ["current_item_ancestor"]=>
  bool(false)
  ["current_item_parent"]=>
  bool(false)
}

In this case, the Blog menu item is a child & doesn't have the 'menu-item-has-children' class. However, its parent item does have it.

2
  • 1
    can you add the output of var_dump($item); to your question, so we know what properties the item has please
    – David Lee
    Feb 20, 2017 at 2:36
  • @DavidLee see above (edited post)
    – timshutes
    Feb 20, 2017 at 3:15

1 Answer 1

1

The $args parameter are the arguments of the entire menu not of the single menu item, you can see it here in the file itself that uses and executes the filter:

@param stdClass $args An object of wp_nav_menu() arguments.

so when your IF is true (the item is a parent item), you are modifying the entire Menu arguments:

$args->link_after = "</span><span class='caret'><i class='dropdown-indicator'></i></span>";

so all menu items after the parent item would have the dropdown indicator.

If you want to add the dropdown indicator you will have to do the classic custom walker way, where you create your own class:

class Custom_Nav_Walker extends Walker_Nav_Menu{}

and override the start_el function, you will find plenty of info about it.

2
  • I already have a custom walker w/ custom classes. The issue is possibly a CSS one then? I thought I needed some extra markup to be added to the parent-items to do this dropdown-indicator. So I could potentially just add some CSS to .menu-item-has-children to pull this off?
    – timshutes
    Feb 23, 2017 at 15:22
  • yeah, If you already have a custom walker you can add logic there to add the dropdown indicator when the menu item is being concatenated (personal preference) and yes you can use CSS only too , my answer is to explain why the function was adding the dropdown icon to all the children.
    – David Lee
    Feb 23, 2017 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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