PHP : wp_nav_menu adding icons

Question

How can I do this:
I want to create menu using wp_nav_menu() and to customize it's output html a little. I want to put < i > in link < a > inside every < li > item of the menu.

I know that I can acomplish this using background-image of < li > items in css, but my goal is to use font icons inside navigation.

I also know that in order to acomplish this we can use walker function inside wp_nav_menu()or use wp_get_nav_menu_object() function, but I simply can't make it right to work.

Answer 1

paste code to the page where you output your nav

<?php
            wp_nav_menu(
                            array(
                                     'theme_location' => 'primary',
                                      'container' => false,
                                      'walker' => new my_nav_walker()
                                   )
                                 );
  ?>

and then call walker.php in functions.php

require get_template_directory().'/inc/walker.php';

copy class Walker_Nav_Menu in class-walker-nav-menu.php from wp-includes folder change Walker_Nav_Menu class to my_nav_walker

and then inside function start_el of my_nav_walker class make a variable called $description as:

    $description  = ! empty( $item->description ) ? '<i class="fa '.esc_attr( $item->description ).'" ></i>' : '';

Paste this code inside start_el function of my_nav_walker class

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $description.$args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

if you add fa-user in description of menu item from backend user icon appear between a href tag inside li

Answer 2

Use wp walker function and insert wp menu description there. Explaining more below -

Just put this code in your theme's functions.php file:

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 . '<ul class="' . $class_names . '">' . "\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 . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

    // 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 ) ? '<i class="fa '.esc_attr( $item->description ).'" aria-hidden="true"></i>' : '';

    $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 <a>
    //$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 </a>

    // Add the caret if menu level is 0
    if ( $depth == 0 && $has_children > 0  ) {
        $item_output .= ' &nbsp;<i class="fa fa-caret-down"></i>';
    }

    $item_output .= '</a>';
    $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 ) ? '<i class="fa '.esc_attr( $item->description ).'" aria-hidden="true"></i>' : '';

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:

<ul class="top-nav nav-right">
                    <li class="dropdown"> 
                        <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" data-animations="fadeInUp">
                            <i class="fa fa-user" aria-hidden="true"></i>My Profile
                             <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu ">
                            <li><a href="#"><i class="icon-bargraph"></i> Dashboard</a></li>
                            <li><a href="#"><i class="icon-gears"></i> Profile Setting</a></li>
                            <li><a href="#"><i class="icon-heart"></i> Questions</a></li>
                            <li><a href="#"><i class="icon-lock"></i> Logout</a></li>
                        </ul>
                     </li>
                </ul>

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'  => '<ul id="%1$s" class="%2$s">%3$s</ul>','depth'  => 10, 'walker' => new fluent_themes_custom_walker_nav_menu) );

If you are not sure where is the description of wordpress menu, or you want more details with screenshot. You can read this article Adding Different Icons To Different Items Of WP Nav Menu

Answer 3

I'am also trying to add icons in my menu.

I've tried before and link_before options but I did't find the way to get any item's variables inside these args.

My aim is to get the following output using Title Attribute set in Custom Link from Customize Menus

<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"> 
    <a title="social-facebook" href="http://facebook.com"> 
         <i class="fi-social-facebook"></i>Facebook Page 
    </a>
</li> 

<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"> 
    <a title="social-google-plus+" href="http://plus.google.com"> 
        <i class="fi-social-google-plus"></i>Google+ Page 
    </a>
</li>

I've also check the other answer but I don't know how to add thumbnails in the Custom Link of the Customize Menus.

Answer 4

Have you tried the before or the link_before options?

before will output before the <a> and link_before will output inside the <a> before the text.

http://codex.wordpress.org/Function_Reference/wp_nav_menu

$settings = array(
     'before' => '<i class="icon"></i>',
     'link_before' => '<i class="icon"></i>'
);

wp_nav_menu( $settings );