How to add arrow to parent menu in wordpress navigation
We sometimes need to add a small arrow to indicate that there is a submenu for a menu item in navigation. There is no direct way of adding a css class to parent menus in wordpress, however i found following piece of code on stack overflow, this is an easy way to add a CSS class to parent menu item.
Step 1. Add following code in functions.php
<?php
class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth,
$depth=0, $args, &$output) {
$id_field = $this->db_fields['id'];
if (!empty($children_elements[$element->$id_field])) {
$element->classes[] = 'arrow'; //enter any classname you like here!
}
Walker_Nav_Menu::display_element($element, $children_elements, $max_depth,
$depth, $args, $output);
}
}
?>Step 2: You need to add the walker argument when you call wp_nav_menu() in your theme:
<?php wp_nav_menu(array('walker' => new Arrow_Walker_Nav_Menu, [other arguments...])) ?>