Skip to content

Instantly share code, notes, and snippets.

@gregrickaby
Created June 7, 2012 13:48
Show Gist options
  • Save gregrickaby/2888874 to your computer and use it in GitHub Desktop.
Save gregrickaby/2888874 to your computer and use it in GitHub Desktop.
Allow HTML in WordPress Custom Menu Descriptions
/**
* Create HTML list of nav menu items and allow HTML tags.
* Replacement for the native menu Walker, echoing the description.
* This is the ONLY known way to display the Description field.
*
* @see http://wordpress.stackexchange.com/questions/51609/
*
*/
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 )); ?>
@JanikWeb
Copy link

You just saved me!

@glendraeger
Copy link

This is very cool. However, when I add a menu item, the description area is filled with content from the post/page....is there a way to avoid that? I can simply delete it and move on.....but for clients....I'd prefer they not have to do that.

@glendraeger
Copy link

I believe the culprit is the filter....
$menu_item->description = apply_filters( 'nav_menu_description', $menu_item->post_content );
specifically $menu_item->post_content

@artboard-studio
Copy link

@glendraeger I am having the same problem with this method.

@webinger
Copy link

hm any ideas how i could add html tags to just one wordpress menu item.

from this:

< a href="/contact">Contact< /a>

to this:

< a href="/contact" data-reveal-id="myModal" data-reveal-ajax="true">Contact< /a>

it should be only for one menu item. not to all.

@webdevid
Copy link

hi do you have idea how to make shortcode working in description menu???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment