Custom Menus Description Stripping HTML Tags

by

Spent two days researching this. I need to be able to add HTML to the Custom Menus Description. Everything I can find (including on this site) is from Feb 2011 and mentions using a strip_tags filter. However, that no longer works. I’m developing on WP 3.4 Beta 4.

I’ve created a custom walker class and found a filter to remove HTML tags and put the following into functions.php:

// Custom Walker Class to extend Default Nav Menu
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
    $description = ( ! empty ( $item->description ) and 1 == $depth )
        ? '<span class="nav_desc">' . esc_html( $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;
}

Then used the following to spit out the menu:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu' => 'primary', 'menu_class' => 'menu sf-menu', 'walker' => new Description_Walker )); ?>

However, the html tags are still be stripped! See the Screen Shots:

Menu Description

Results

1 Answer
1

(Untested). But if you want to use HTML in the description, then you shouldn’t use:

`esc_html( $item->description )`

Try removing the esc_html as this escapes the HTML. (Or better still use wp_kses instead to only allow certain tags.).

So you want

$description = ( ! empty ( $item->post_content ) and 1 == $depth )
    ? '<span class="nav_desc">' .$item->post_content . '</span>' : '';

And you still want the remove_filter( 'nav_menu_description', 'strip_tags' );, but the cus_wp_setup_nav_menu_item function is unnecessary.

Although I don’t in the above example, I would recommend using wp_kses.

Leave a Comment