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

About the author

Jaspreet Kaur

Jaspreet is a UI/UX designer with expertise in front-end development for web and mobile. She is passionate about designing solutions through collaboration, iteration, and following the best technology development practices.

One thought on “How to add arrow to parent menu in wordpress navigation

  1. zakir says:

    thanks for the post sir,it helped a lot.can you please explain how can we keep startHere arrow indication in menu Bar as shown here at shoutmeloud.com ,i have asked mr.harsha aggrawal he replied it came inbuilt in child theme .How can we design it in menubar of other themes .

    thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *