The code below adds arrow icons to the menu items that have sub-menus. As shown in the screenshot above, top level menu items will have down arrows, and submenus will use right arrows. Not included in this code is the CSS for the icon font itself, but you can create your own icon font at IcoMoon or Fontastic.
<?php | |
/** | |
* Add arrows to menu items | |
* @author Bill Erickson | |
* @link http://www.billerickson.net/code/add-arrows-to-menu-items/ | |
* | |
* @param string $item_output, HTML output for the menu item | |
* @param object $item, menu item object | |
* @param int $depth, depth in menu structure | |
* @param object $args, arguments passed to wp_nav_menu() | |
* @return string $item_output | |
*/ | |
function be_arrows_in_menus( $item_output, $item, $depth, $args ) { | |
if( in_array( 'menu-item-has-children', $item->classes ) ) { | |
$arrow = 0 == $depth ? '<i class="icon-angle-down"></i>' : '<i class="icon-angle-right"></i>'; | |
$item_output = str_replace( '</a>', $arrow . '</a>', $item_output ); | |
} | |
return $item_output; | |
} | |
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 ); |