Add text to WordPress menu WordPress

Ivaylo Draganov answers:

Hello,

I assume that you have to knowledge to create a WP nav menu and style it for horizontal dropdown. And your desire is to print custom text in front of each submenu. Since that is more or less a design enhancement using CSS and JavaScript to achieve it would be the best solution.

I suggest using <em>:before { content: 'text'; }</em> for able browsers and a JavaScript fallback for older browsers. Something along the lines of:

<strong>CSS - adjust you selectors accordingly</strong>

#menu-item-3 > ul.sub-menu > li:first-child:before {
content: 'Designers: ';
}
#menu-item-4 > ul.sub-menu > li:first-child:before {
content: 'Stylists: ';
}


<strong>load jQuery - put this line inside theme's functions.php</strong>

wp_enqueue_script( 'jquery' );


<strong>JavaScript fallback - put this code inside header.php after wp_head() hook</strong>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#menu-item-3 > ul.sub-menu > li:first-child').before('Designers: ');
jQuery('#menu-item-4 > ul.sub-menu > li:first-child').before('Stylists: ');
});
</script>


In this example <em>#menu-item-3</em> and <em>#menu-item-4</em> are the top level navigation elements. Adjust the code to match your selectors or even better - add custom classes to top level WP nav menu items. That will make the code more future proof and more human-readable. For example <em>.designers</em> and <em>.stylists</em>.

Michelle Dancer answers:

<strong>Note</strong>: <em>There are Javascript solutions here that are fine but I know some people don't like to use JS if it can be avoided so just in case that includes you...</em>

Ok as others have said, step 1 = custom menus. It sounds like your theme is already using these, if it isn't there are a few tutorials linked here already to show you how to make that change so I won't repeat everyone else.

Step 2 is to get the "stylist:" etc text showing up. When I read this question it reminded me of a tutorial I saw to add descriptive text underneath each menu item. It strikes me that all you need is to add descriptive text to the left of the FIRST menu item.

Here is the tutorial in question, it explains everything quite well. [[LINK href="http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output"]]http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output[[/LINK]]

From a quick glance at Kriesi's code there it seems it does check whether there actually is a description or not before echoing it, so all you'd need to do in theory is enter "Stylists:" in the description field for "Stylist 1" and make sure the other stylist links have no description. Your menu layout will be different to his so the CSS at the end of the tutorial probably isn't much help but the general gist is there.