Normal WordPress Menu looks like:
Home | Blog | About us | Contact
But I’ve seen many pages with descriptions under these links:
Home Page | Our Blogs | About us
| Contact
….meet us…| read more| basic info| contact form
How to achieve this?
(I want it to be core function for all my themes, so no plugins please, I just want to know how it’s done)
You need a custom walker for the nav menu.
Basically, you add a parameter
'walker'
to thewp_nav_menu()
options and call an instance of an enhanced class:The class
Description_Walker
extendsWalker_Nav_Menu
and changes the functionstart_el( &$output, $item, $depth, $args )
to look for$item->description
.A basic example:
Or, alternatively as @nevvermind commented, you could inherit all the functionalities of the parent’s
start_el
function and just append the description to$output
:Sample output:
Now enable the description field in
wp-admin/nav-menus.php
to get the ability to edit this field. If you donât WP just trashes your complete post content into it.Further reading:
And thatâs it.
Since WordPress 3.0, you don’t need a custom walker anymore!
There is the
walker_nav_menu_start_el
filter, see https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/Example:
This isn’t better or worse than other suggestions; it’s just different. It’s short and sweet too.
Rather than using the description field as @toscho suggests, you could fill in the “Title” field on each menu item with the text you want, and then use this CSS:
.menu-item a:after { content: attr(title); }
It would also be easy to use jQuery to append it, but the text is ornamental enough that CSS seems appropriate.
You can also write a
<span>
element after the navigation label in menus and use the following CSS rule to change itsdisplay
setting (it’sinline
by default):