January 21, 2013 in Snippets, Wordpress

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...])) ?>