Adding Different Icons to Different Items of WP Nav Menu

January 24, 2017

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 ) ? ‘‘ : ”;

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.

Author
Article by reader87 Author
Published on: January 24, 2017
Last updated on:

Leave a Reply

Your email address will not be published. Required Fields are Marked *