How to show wp_nav_menu item description - quick code fix WordPress
- REFUNDED
<strong>NOTE: This seems a quick fix, but if you think it's worth more $$ please say so.</strong>
In WordPress 3's Appearance > Menus menu builder, there's an option to enter a description for the menu item, but no built-in way to show these descriptions on the front end. I found the code below at [[LINK href="http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus#comment-227967"]]Justin Tadlock's blog[[/LINK]]:
// Hook nav rules to showing description page
// Look details information by this page wp-includes/nav-menu-template.php
// or by this link - http://core.svn.wordpress.org/trunk/wp-includes/nav-menu-template.php
add_filter('walker_nav_menu_start_el', 'description_in_nav_el', 10, 4);
function description_in_nav_el($item_output, $item, $depth, $args){
$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 ) .'"' : '';
return preg_replace('/([^<]*?)</', "" . "{$item->title}{$item->post_content}<", $item_output);
}
I've pasted it into the functions.php file of my child theme and it definitely does something. However, you can probably see by just looking at the last line of code above that the output is going to be pretty jacked up. Check the attached screenshot for one example of how it comes out. Sometimes (so far only with Japanese titles) nav items with only a title and no description are repeated immediately after a '<'. (Safari 5.0.3 on Mac OS X 10.6.5)
WHAT I WANT:
I'd like for the description text to appear immediately below the linked title text but still within the LI tag.
If at all possible, I'd like to be able to use HTML in the description field too - however, that's just a bonus and not necessary - the first person to fix the code wins!
Answers (2)
idt answers:
It can also be done using the code in this topic: [[LINK href="http://wordpress.org/support/topic/how-to-show-the-description-of-the-menu"]]http://wordpress.org/support/topic/how-to-show-the-description-of-the-menu[[/LINK]]
El Gato comments:
Sorry IDT, I'm looking for a fix to the code I posted. I already tried the code from that page, and totally it breaks my layout.
enodekciw answers:
// Hook nav rules to showing description page
// Look details information by this page wp-includes/nav-menu-template.php
// or by this link - http://core.svn.wordpress.org/trunk/wp-includes/nav-menu-template.php
add_filter('walker_nav_menu_start_el', 'description_in_nav_el', 10, 4);
function description_in_nav_el($item_output, $item, $depth, $args){
$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 ) .'"' : '';
return '<br/><span>' . preg_replace('/([^<]*?)</', "" . "{$item->title}{$item->post_content}<", $item_output) . '</span>';
}
what about something like this?
El Gato comments:
Unfortunately not. The code you gave still behaves relatively the same, but now it's showing the post content in the menu (obviously not desired). The HTML output should look something like this:
<li id="(menu item ID here)" class="(menu classes here)"><a href="example.url">(Menu item title here)</a><br/><span>(Menu Item Description field content)</span></li>
Instead, with this code, I am getting this:
<li id="(menu item ID here)" class="(menu classes here)"><br/><span>(Menu item title)(Menu Item Description)<(Menu Item Title)(Menu Item Description content)</a></span></li>
for custom menu item links, and for normal menu items:
<li id="(menu item ID here)" class="(menu classes here)"><br/><span>(Full post/page content)</a></span></li>
I hope this is a little more clear.