Sometimes an awesome WordPress theme ends up lacking one particular feature or having one particular defect that makes you have double mind; if you still want to use it or not. It is interesting however to know that many of such defects can be corrected and some features it lacks can be added with few lines of code. Thanks to the flexibility of WordPress. In this article, we are look at how to add an arrow that indicates a menu that has a sub menu. It works.

Step 1. Add the following code to the theme’s functions.php

<?php

// add arrows to menu parent
function oenology_add_menu_parent_class( $items ) {

$parents = array();
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}

foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = ‘has-children’;
}
}

return $items;
}
add_filter( ‘wp_nav_menu_objects’, ‘oenology_add_menu_parent_class’ );

 

Step 2. Add the following  to the (functional) css file

.main-navigation li.has-children > a:after {
color: #222;
content: ‘ ▼’;
font-size: 14px;
vertical-align: 1px;
}
.main-navigation li li.has-children > a:after {
color: #222;
content: ‘ ►’;
font-size: 14px;
vertical-align: 1px;
}

Note: that “main-navigation” must be same with the class name used for the menu on the css file.

Need Assistance designing or redesigning your website? Contact us now.

1 thought on “How to add a downwards submenu arrow in menu on WordPress Themes

Leave a Reply

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