0

I tried to place HTML code in WordPress menu description, it's showing an inline code <i class="fa fa-cloud"></i> instead of an icon.

Already tried that one but still not working

// Allow HTML descriptions in WordPress Menu
remove_filter( 'nav_menu_description', 'strip_tags' );
add_filter( 'wp_setup_nav_menu_item', 'cus_wp_setup_nav_menu_item' );
function cus_wp_setup_nav_menu_item( $menu_item ) {
    $menu_item->description = apply_filters( 'nav_menu_description',  $menu_item->post_content );
    return $menu_item;
}
-1

Put the below full code and that should work..

<?php class Description_Walker extends Walker_Nav_Menu {

    function start_el(&$output, $item, $depth, $args)
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

        // Build default menu items
        $output .= "<li id='menu-item-$item->ID' $class_names>";

        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // Build the description (you may need to change the depth to 0, 1, or 2)
        $description = ( ! empty ( $item->description ) and 1 == $depth )
            ? '<span class="nav_desc">'.  $item->description . '</span>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

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

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

// Allow HTML descriptions in WordPress Menu
remove_filter( 'nav_menu_description', 'strip_tags' );
add_filter( 'wp_setup_nav_menu_item', 'cus_wp_setup_nav_menu_item' );
function cus_wp_setup_nav_menu_item( $menu_item ) {
     $menu_item->description = apply_filters( 'nav_menu_description', $menu_item->post_content );
     return $menu_item;
} ?>

and then use this in your template:

<?php wp_nav_menu( array( 'walker' => new Description_Walker )); ?>
  • already tried that one but it's not working. – Maan Feb 28 '18 at 10:27
  • An answer should include an explanation, not just code (actually IMHO the explanation is several times more important than the code). In addition the code seems to advocate an unescaped output which is just a bad idea. – Mark Kaplun Feb 28 '18 at 12:48
1

This is not directly solving the HTML issue, but alternatively, you could add the Font Awesome icons to the descriptions through CSS, within the :before pseudo element.

Something in the lines of:

.description:before {
  content: '\f0c2';
  font-family: FontAwesome;
  position: absolute;
  ...
}

If you need a different icon for each item's descriptions, you can either use the :nth-child(n) selector, or the IDs of the menu items (e.g. #menu-item-85 .description).

  • this idea isn't suitable for me – Maan Feb 28 '18 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.