Adding Different Icons to Different Items of WP Nav Menu
Many WordPress developers wondering how icons can be added before the menu items of wp nav menu (wp_nav_menu). There is a simple solution like this:
Use ‘link_after’ or ‘link_before’ in the wp_nav_menu array. But, the problem is – it will add the same icon in all of the menu items. So, what to do if I want to use different icons for different menus without using any external plugins?
Use wp walker function and insert menu description there. Explaining more below –
Just put this code in your theme’s functions.php file:
// **********************************************************************//
// ! Custom Walker for wp_nav_menu()
// **********************************************************************//
class fluent_themes_custom_walker_nav_menu extends Walker_Nav_Menu {private $blog_sidebar_pos = “”;
// add classes to ul sub-menus
function start_lvl( &$output, $depth = 0, $args = Array() ) {
// depth dependent classes
$indent = ( $depth > 0 ? str_repeat( “\t”, $depth ) : ” ); // code indent
$display_depth = ( $depth + 1); // because it counts the first submenu as 0
$classes = array(
‘dropdown-menu’,
( $display_depth % 2 ? ‘menu-odd’ : ‘menu-even’ ),
( $display_depth >=2 ? ” : ” ),
‘menu-depth-‘ . $display_depth
);
$class_names = implode( ‘ ‘, $classes );// build html
$output .= “\n” . $indent . ‘
‘ . “\n”;
}
// add main/sub classes to li’s and links
function start_el( &$output, $item, $depth = 0, $args = Array(), $id = 0 ) {
global $wp_query, $wpdb;
$indent = ( $depth > 0 ? str_repeat( “\t”, $depth ) : ” ); // code indent// depth dependent classes
$depth_classes = array(
( $depth == 0 ? ” : ” ), //class for the top level menu which got sub-menu
( $depth >=1 ? ” : ‘dropdown’ ), //class for the level-1 sub-menu which got level-2 sub-menu
( $depth >=2 ? ‘sub-sub-menu-item’ : ” ), //class for the level-2 sub-menu which got level-3 sub-menu
( $depth % 2 ? ‘menu-item-odd’ : ‘menu-item-even’ ),
‘menu-item-depth-‘ . $depth
);
$depth_class_names = esc_attr( implode( ‘ ‘, $depth_classes ) );// passed classes
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) ) );// build html
$output .= $indent . ‘
See this line:
$description = ! empty( $item->description ) ? ‘The full html output of the menu will be something like this:
However, here is your wp nav menu code in your header.php file or in any other theme files:
wp_nav_menu( array(‘theme_location’ => ‘top_bar_login’,’container’ => false,’container_id’ => ”,’conatiner_class’ => ”,’menu_class’ => ‘top-nav nav-right’,’echo’ => true,’items_wrap’ => ‘
%3$s
‘,’depth’ => 10, ‘walker’ => new knowledgeqa_walker_nav_menu) );
If you are not sure where is the description of wordpress menu, please see the screenshot below:
Hope this helps those who are searching for a nice solution of using wp nav menu with icons without using any external plugins.
For more tutorils on WordPress, SEO, Making money online, Google toools etc, just have a look at out at our latest articles