Home » Php » PHP / WordPress – add arrows to parent menus

PHP / WordPress – add arrows to parent menus

Posted by: admin July 12, 2020 Leave a comment

Questions:

is it possible to add some kind of class like ‘arrow’ or a span inside the menus that have submenus (in WordPress)?
it seems that you can do this is using javascript, but I want to know if there’s a PHP solution…

in WP 3.0, I saw that active menus have the “parent” or “ancestor” classes on them, but this is only for active menu, and I need it for inactive ones as well

How to&Answers:

This functionality really should be in WordPress core!
Anyway, I had a look at the menu template source you sent in a comment on the other answer, and have found a (rather hacky) way to add a class on menu items with children. It basically subclasses the default walker to extend its default behaviour. It’s probably best if you put it in your theme’s functions.php. Here’s the code:

<?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);
    }
}
?>

To call it, you’ll need to add the walker argument when you call wp_nav_menu() in your theme, like so:

<?php 
wp_nav_menu(array('walker' => new Arrow_Walker_Nav_Menu, [other arguments...]))
?>

Hope that works for you! I’ve only tested it superficially, but it seems to work. Let me know if there are any edge cases where adding the class fails.

Answer:

I don’t know of any native WordPress support for it, but you could easily do it using some jQuery.

<script type="text/javascript">
$("#menu-id ul li:has(ul)").addClass("parent");
</script>

Answer:

If you’re like me and want to add an HTML arrow in a span to your parent menu item, add a line like this inside of Donald Harvey’s customer walker class:

$element->title .= '<span class="caret down-caret">▼</span>'; 

You can could also add that HTML directly to the menu label in the WP admin > menu page but that’s not a great way to do it.

I blogged a bit about this here http://cameronnokes.com/blog/adding-an-icon-to

Answer:

Just paste this in to your css code and it will work as expected.

.nav-menu li > a:after {
    color: #888;
    content: ' ▾';
}

.nav-menu li > a:hover:after {
    color: #444;
    content: ' ▾';
}

.nav-menu li > a:only-child:after {
    content: '';
}

Ps. Don’t forget to set your page UTF-8

Answer:

The simple and humble way to add the class parent to main menu if it has sub menu

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("ul.sub-menu").parents().addClass('parent');  
});
 </script>

And the style is

    <style type="text/css">
       .main-navigation .parent > a, .main-navigation .parent > a:hover {
            background-image: url("images/arrow.png");
            background-position: right center;
            background-repeat: no-repeat;
     }  

    </style>

Answer:

I don’t know what is question but we can add arrow in menu by css like this:

.menu li > a:after {
    color: #fff;
    content: ' ▾';
}

.menu li > a:only-child:after {
    content: '';
}