Best Practices For Adding Supplementary Text To WordPress Menus
Understanding Menu Structure and Limitations
WordPress navigation menus utilize a hierarchical structure to organize menu items. Each menu item can have a title, description, and other assigned settings. However, the title displayed to site visitors in the front-end menu UI has character limits imposed by the menu rendering process.
Specifically, the wp_nav_menu() function applies a truncation of 30 characters by default to menu item titles. Any additional descriptive text beyond this length will get cut off in the displayed menu. Furthermore, menu items only display the assigned title by default, without the description shown.
These limitations on menu item textual content can pose challenges when needing to communicate detailed information in a menu structure. However, WordPress offers filters to customize menu output, and developers can leverage various methods to append additional text elements to supplement menu items.
Methods to Add Supplementary Text
Using Menu Item Descriptions
The most straightforward way to add descriptive text for a menu item is by using the menu item description field when editing the menu in the WordPress admin dashboard. This assigns extra content that can then get output via custom menu walkers or code.
For example, a restaurant menu with menu items for “Pasta” or “Salads” could have supplementary descriptions about what types of offerings are included in each section. These details won’t display by default but can get appended as extra menu content with customizations.
Outputting Text in Menu Walker
To leverage menu item descriptions or other textual content in a menu, a custom walker class can be implemented in the theme. This allows specifying precisely where extra text should output relative to the menu item during the menu rendering process.
The walker can tap into menu item properties, such as the description, to pull text and output it using the start_el() and end_el() walker methods. Styling can also get applied to visually distinguish supplementary text from menu items.
Appending Text with JavaScript
Another method to add supplementary text for menu items is through a small JavaScript script. This can attach targeted text strings to specific menu items by selector after the menu renders.
The benefit of this approach is not needing to edit PHP files in the theme. However, it provides less control over text placement compared to outputting it directly in the menu structure. But for quick text additions, JavaScript can work well.
Formatting Supplementary Text
Controlling Location Relative to Menu Item
When outputting supplementary text for menu items, properly controlling the location is important both visually and for accessibility. The extra text should appear directly connected to its associated menu item in the markup.
Custom menu walkers in WordPress provide the most precision for locating supplementary text. The walker code defines the exact method and structure for building the menu output.
For example, descriptive text could output right after the <a> link tag within a menu <li>, keeping it associate for screen readers.
Styling Text for Visual Separation
Appropriate styling of supplementary text can help visually distinguish it from the menu item title itself. This improves scannability for visitors to easily differentiate the primary menu text vs additional descriptors.
Good practice is to style supplementary text in a muted fashion compared to menu links. For example, applying a smaller font size, lighter color, italic styling, or separating with a vertical bar text element.
Spacing elements such as margin or padding also help isolate supplementary text for improved visual hierarchy. Custom menu walker output can directly apply CSS classes to enable targeted styling.
Example Code Snippets
PHP/JavaScript Examples for Adding and Styling Supplementary Text
Custom Menu Walker Outputting Descriptions
“`php
url .'”>’;
$output .= $item->title;
$output .= ‘‘;
//Output description with class
$output .= ‘‘;
}
}
?>
“`
JavaScript Append Text by Selector
“`js
const menuItem = document.querySelector(‘#menu-item-15’);
const text = document.createElement(‘span’);
text.innerText = ‘New Supplementary Text’;
menuItem.append(text);
“`
Styling Supplementary Text
“`css
.menu-description {
font-size: 14px;
font-style: italic;
color: #666;
padding: 0 10px;
}
“`
Considerations for Usability
Length and Scannability
Supplementary text risks cluttering the menu UI if overused or not formatted distinctly from menu titles. Descriptors should aim for brevity yet clarity.
Likewise, ample whitespace between condensed menu links and descriptive text improve scannability. Menu items group visually through proximity, separating extended descriptions.
Accessibility
Screen reader users navigate menus to gather page structure information. Descriptors directly associated with their menu item give helpful context.
Formatting techniques like proper heading hierarchy and spacing also benefit accessible parsing of content sections in textual menus.
Consistent Behavior Across Themes
Custom menu output logic in a specific theme won’t inherently carry over if the theme gets changed. Core WordPress menu management and rendering doesn’t natively support descriptors.
Reuseable plugin logic or putting key customizations in child themes improve consistency of supplementary text behavior across themes.
Additional Tips and Tricks
Plugins for Enhanced Menus
Plugin extensions are available with more robust menu features for adding and formatting supplementary text, icons, badges, colors, and other elements.
For example, plugins can create data fields for menu item metadata used in advanced custom walker menu output logic.
Creatively Working Within Limitations
Core menu functionality intentionally limits text length and output complexity to ensure performance. Lightweight supplementary text additions balance clarity while avoiding bloat.
When more excessive descriptors get needed, exploring alternative information architecture approaches can work better vs overly taxing menus to communicate dense data.
