Enabling The Menu Description Field In The WordPress Dashboard
The menu description field in WordPress allows administrators to add descriptive text and metadata for navigation menu items. This text is hidden from front-end visitors by default but can be enabled with some customizations.
The menu description field serves multiple purposes:
- It allows admins to add notes and details about menu items for internal reference
- It enables additional content and context to be associated with links
- It provides a way to include accessibility and semantic information
Although useful, the menu description field is not displayed in menus out-of-the-box because it can create overly long or messy navigation elements if misused. However, with some theme customization, the field can be selectively enabled to augment menus.
What is the Menu Description Field?
The menu description field in WordPress is a text area displayed when editing a navigation menu item in the dashboard. It allows admins to provide a description, definition, or contextual details about that link.
When adding custom links, pages, categories, or other items to a menu, the description field appears below the navigation label field in the menu editor. The description can contain plaintext or HTML and accepts up to 255 characters by default.
Although menu descriptions are defined per menu item, they are not visible to site visitors on the front-end by default. Instead, descriptions exist as metadata assigned to links for internal reference. However, themes and plugins can access these descriptions to display them in various ways.
Definition and Purpose of Menu Descriptions
More specifically, the menu description field enables admins to:
- Provide supplemental information about a link to inform content editors working in the dashboard
- Add textual context and semantics for menu items to improve internal search and content discoverability
- Supply additional accessibility information and details to support screen readers
- Assign metadata like rel, title, and other attributes to menu anchor tags
These descriptive details are metadata attached to the menu item record itself. Themes and plugins can then access these descriptions to output them alongside menu links on the front-end or utilize them in other creative ways.
So in summary, the menu description field exists to:
- Enable admins to assign extra semantic, contextual and accessibility information to links
- Improve internal content management workflows by allowing descriptive details to be recorded per menu item
- Provide the data foundation for themes and plugins to access and implement menu descriptions on the front-end
Why Menu Descriptions are Hidden by Default
Given the utility of menu descriptions, why does WordPress hide this data field out-of-the-box?
The main reason menu descriptions are not shown in navigation menus automatically is theming and design limitations. Displaying descriptions along each link can easily lead to overloaded and messy menus visually.
More specifically, enabling menu descriptions by default would:
- Create menus with too much text that become difficult to scan
- Produce cramped, narrow, or multi-line menu items
- Break visual hierarchy by emphasizing supplemental details
- Lead to poor implementation with short, missing, or improper descriptions
Given these front-end implications, the menu description field is purposefully hidden to avoid suboptimal display. Instead, WordPress themes and plugins have to opt-in to showing descriptions through customizations.
This leads to more deliberate, selective, and well-designed usage where necessary. As a result, the semantic utility and accessibility of descriptions can be leveraged without negative presentation side-effects by default.
How to Unhide the Menu Description Field
WordPress does not show menu item descriptions out-of-the-box. But they can be enabled selectively with some simple PHP code added to a theme or plugin.
The basic process involves:
- Accessing the menu description data associated with items
- Modifying the anchor tag to append descriptions
- Updating menu output dynamically using filters
This can be achieved with a small plugin or directly in a theme’s functions.php file. Instrumenting the menu generation this way allows fine-grained control over where, when and how descriptions appear.
Using a Plugin to Enable the Field
The easiest way to unlock menu descriptions is by using an existing plugin. There are a handful options available, with Nav Menu Descriptions being a top choice.
After installing, this plugin adds back-end settings to globally enable descriptions site-wide or on specific menus. It also includes front-end styling options for fast results.
The plugin works by hooking into the standard menu walker class and augmenting link output. This demonstrates the core approach most solutions take to tampering with menu generation in a non-destructive way.
However, plugins limit flexibility compared to direct theme coding. Custom functionality like selective descriptions may still require edits to functions.php or other template files.
Example Theme Code to Display Descriptions
Alternatively, menu descriptions can be shown by adding the following PHP to a theme:
menu_order ) {
// Append description
$item_output = str_replace( '', '', $item_output );
}
return $item_output;
}
?>
What this snippet does is:
- Use the walker_nav_menu_start_el filter to intercept menu output
- Check that the item belongs to the primary menu
- Append the description HTML after the link
This will cleanly add all descriptions from only the primary menu without a plugin. More advanced logic can be added for targeting specific items, menus or contextually showing details.
Customizing the Display of Menu Descriptions
While unhiding menu descriptions is fairly straightforward, additional considerations should be made to polish and refine the user experience.
Here are some best practices for front-end display and customization:
- Carefully style descriptions to match branding and prevent visual issues
- Strategically show descriptions only for certain navigations or contexts based on utility
- Localize text for translations and multi-language sites
- Implement accessibility best practices for hidden content
Taking the time to test, iterate and refine description presentation separates high-quality implementations from slipshod addons. The details matter when modifying something as important as site navigation.
Styling the Menu Description Field
The most basic display consideration is styling descriptions to match the existing theme branding and navigation presentation.
Some best practices involve:
- Reducing description text size slightly compared to links
- Coloring descriptions to be muted and less emphasized visually
- Aligning descriptions to left, right or centered positions
- Allowing descriptions to wrap or break to a second line cleanly
For example, some simple description styling might look like:
.menu-description {
display: block;
font-size: .85em;
font-style: italic;
opacity: .8;
padding-top: .25em;
}
Tight control over CSS properties ensures descriptions harmonize visually rather than compete with links. Spending time to polish styles here pays dividends across all device sizes and menu variations.
Controlling Which Menus Show Descriptions
In some cases, revealing descriptions universally may not make sense. Lengthy supplemental details could overwhelm compact menus like footers for instance. There may also be redundancies across navigations.
In these cases, limiting descriptions to certain menus only based on utility can refine the experience. For example:
- Primary nav bar with critical sections
- Secondary fat footer navigation
- Specific custom navigations
Building on the previous example, descriptions can be limited to certain menus by ID. For example:
theme_location, $description_menus ) ) {
// Append description after link
$item_output = str_replace( '', '', $item_output );
}
return $item_output;
}
?>
Now descriptions can be focused only on certain navigations. This prevents overload while retaining utility where it matters most.
Localization
For multi-language sites, description text should be wrapped properly for localization plugins. This ensures string translations propagate correctly.
Typically this involves using gettext functions like __() or _e() when outputting descriptions. For example:
', '', $item_output );
return $item_output;
?>
With text strings properly prepared, descriptions can be localized like any other theme or plugin content.
Accessibility Considerations
Accessibility best practices also apply to front-end implementations of menu descriptions. Namely:
- Redundant link content should be avoided for screen readers
- Descriptions should receive appropriate ARIA markup if hidden
- Color contrast and font size should allow easy reading
Copying the exact menu link name into the description text is redundant for assistive technologies. Unique, supplemental information provides more value.
If showing descriptions on hover/focus only, ARIA attributes can indicate additional content to screen readers. For example:
Link Text
With a solid descriptive foundation in place, further enhancements and refinements can build-on the menu description field in innovative ways.
Additional Tips for Menu Descriptions
A few miscellaneous tips can help take menu descriptions from good to great:
- Strive for tight, concise descriptions up to ~140 characters
- Formatting links as buttons can accommodate longer descriptions
- Standard text works well, but HTML can also add light styling if needed
- Remind content editors best practices for writing quality descriptions
Combining thoughtful information architecture, deliberate presentation considerations, and these additional tips will ensure success unlocking the hidden potential of menu descriptions.
