Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add text to WordPress menu WordPress


I'm working on a fashion template, and in the sub-navigation of the top-level pages, the client wants to specify that the pages are links to designer pages, or stylist pages, and so on.

Here's an example of the navigation:

Home | About | Dresses | Shoes | Hair

If, for example, I hover over dresses, the navigation becomes:

Home | About | Dresses | Shoes | Hair
Designers: Designer 1 | Designer 2 | Designer 3

And if I hover over hair, the navigation becomes:

Home | About | Dresses | Shoes | Hair
Stylists: Stylist 1 | Stylist 2 | Stylist 3

Ideally I'd like to continue using WP menus, for ease of use. Using :before {content isn't really an option due to browser compatibility, but I welcome your suggestions.


Answers (7)


Ivaylo Draganov answers:


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: ');

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=""]][[/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.


Tobias Nyholm answers:

I can think of two possible solutions:
1) Use templates.
Define a different template for each "subpage-type"

2) Specify custom fields.
Add a custom field to the pages that should have that peace of text.

echo $meta['menu_text'];

I think the second solution is more preferable.

Just email me if you want more information of these.


Pippin Williamson answers:

This is easy.

Use subpages to create the menu items, then use a CSS hover menu to display the submenus when hovering over the top level menu.

You could use the link below as a template for your menus:

[[LINK href=""]][[/LINK]]

You will need to modify the CSS a little in order to achieve the exact effect you want, but it's a good starting point.


enodekciw answers:

As I get it, you only have problem getting that 'Designer: ', 'Stylist: ' etc to show up?
If so, one (probably, the easiest) way to do it would be JavaScript. Just add some new list items into your children ul's and style them the way you like. This should be easily achieved with jQuery, for example. Tho', I'm going to sleep now, so won't provide with exact code right now. But I guess you'll find the way to use my idea (i agree, it's not the best one.. ;))
If not, I'll code it up for you tommorow.


Nilesh shiragave answers:

Yes go with using the wp-menu

and just follow this tutorial to create the horizontal navigation

Just replace the php code with this code to display menu using wp menu

<?php wp_nav_menu( array('menu' => 'Your menu name','menu_id'=>'nav2','menu_class'=>'nav2' )); ?>


Denzel Chia answers:


Use WordPress 3.0 menu system. You can setup the menu with a parent category with child categories as the list.

Follow this tutorial to code your menu in your theme.

Then use jQuery Superfish to style your menu

You will be able to get what you want.