Adding Different Icons to Different Items of WP Nav Menu

Many developers of WordPress Themes 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 . ‘

• ‘;// link attributes
  $attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;
  $attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;
  $attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;
  $attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;
  //$attributes .= ‘ class=”‘ . ( $depth > 0 ? ” : ” ) . ‘”‘;// Check if menu item is in main menu
  $has_children = $wpdb->get_var(“SELECT COUNT(meta_id)
  FROM wp_postmeta
  WHERE meta_key=’_menu_item_menu_item_parent’
  AND meta_value='”.$item->ID.”‘”);if ( $depth == 0 && $has_children > 0 ) {
  // These lines adds your custom class and attribute
  $attributes .= ‘ class=”dropdown-toggle”‘;
  $attributes .= ‘ data-toggle=”dropdown”‘;
  $attributes .= ‘ data-hover=”dropdown”‘;
  $attributes .= ‘ data-animations=”fadeInUp”‘;
  }
  $description = ! empty( $item->description ) ? ‘‘ : ”;

  $item_output = $args->before;
  $item_output .= ‘<a’. $attributes .’>’;
  $item_output .= $description.$args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after; //If you want the description to be output after
  //$item_output .= $description.$args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after; //If you want the description to be output before

  // Add the caret if menu level is 0
  if ( $depth == 0 && $has_children > 0 ) {
  $item_output .= ‘  ‘;
  }

  $item_output .= ”;
  $item_output .= $args->after;

  // build html
  $output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args, $id );
  }
  } //End Walker_Nav_Menu

See this line:

$description = ! empty( $item->description ) ? ‘‘ : ”;

And this line:

$item_output .= $description.$args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;

Here you see $item->desctiption is a variable. For example: if you put fa-user as menu item description of a menu. The html output of the above line will be:

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 a top notch collection of WordPress themes and plugins, take a look at our Best Collections page. And if you need an affordable and secure hosting plan, you can take a look :