Add Menu Descriptions in WordPress Themes

Adding descriptions to your WordPress menu items can make your navigation clearer and more inviting by showing a short line of text under each link. This guide walks you through enabling and adding menu descriptions in most WordPress themes, whether your theme supports them out of the box or you need a small code tweak.

What You’ll Need

• A WordPress site with an active theme (any standard theme).
• Admin access to the WordPress dashboard.
• For some themes, access to the theme files (via Appearance → Theme File Editor or FTP) to add a small code snippet.
• A child theme is recommended if you edit theme files, so your changes aren’t lost on updates.

Step-by-Step

1. Check if your theme supports menu descriptions. Many themes do by default. The easiest way to find out is to go to Appearance → Menus in your WordPress dashboard. If you see a “Description” field under each menu item, your theme already supports it. If not, proceed to step 2.
2. Enable the description field (if hidden). In the Menus screen, click the “Screen Options” tab at the top-right. Check the box next to “Description” under “Show on screen.” This will display the description input box for each menu item.
3. Add descriptions to your menu items. Expand a menu item by clicking the arrow on the right. In the “Description” field that appears, type a short, helpful phrase (e.g., “Browse our latest articles” for a Blog link). Click “Save Menu” to store your changes.
4. Display the descriptions in your theme. If your theme already supports descriptions, they will now appear under the menu labels. If they don’t show up, your theme likely doesn’t output the description in the menu HTML. You’ll need to add a small code snippet to your theme’s functions.php or use a plugin (see step 5).
5. Add code to display descriptions (if needed). If your theme doesn’t show descriptions, you can add a filter to your theme’s functions.php file. Here’s a common snippet that works with most themes:

   add_filter( 'walker_nav_menu_start_el', 'add_menu_description', 10, 2 );
   function add_menu_description( $item_output, $item ) {
       if ( ! empty( $item->description ) ) {
           $item_output = preg_replace( '/(<a[^>]*>)/', '$1<span class="menu-description">' . $item->description . '</span>', $item_output, 1 );
       }
       return $item_output;
   }

   Add this code to your child theme’s functions.php file. If you don’t have a child theme, consider creating one or use a code snippet plugin to avoid losing changes on theme updates.

6. Style the descriptions with CSS. Once descriptions appear, you may want to style them. Add custom CSS (via Appearance → Customize → Additional CSS) to make them look good. For example:

   .menu-description {
       display: block;
       font-size: 0.8em;
       color: #666;
   }

   Adjust the styles to match your theme’s design.

7. Test your menu. Visit your site’s front end and hover over or view the menu to ensure descriptions appear correctly and don’t break the layout. Check on mobile and desktop.

Common Mistakes

• Descriptions not showing because the theme doesn’t output them. Even if you add descriptions, the theme must include the code to display them. If not, you need the code snippet above.
• Adding code to the wrong file. Editing the main theme’s functions.php directly can cause changes to be lost when the theme updates. Use a child theme or a code snippet plugin.
• Forgetting to save the menu. After adding descriptions, you must click “Save Menu” in the Menus screen.
• Making descriptions too long. Long descriptions can clutter the menu and cause layout issues. Keep them to a few words.
• CSS conflicts. The menu-description class might conflict with existing styles. Use unique class names or inline styles if needed.

Tips

• Use descriptions to give context, not to repeat the menu label. For example, “Shop” could have “New arrivals & bestsellers”.
• Keep descriptions short—ideally under 40 characters—so they don’t wrap awkwardly.
• If your theme uses a mega menu or a custom menu walker, you may need to modify that walker instead of using the filter above. Check your theme’s documentation.
• Test with different screen sizes to ensure the menu remains usable on mobile. If descriptions cause issues, you can hide them on smaller screens with CSS media queries.
• Consider using a plugin like “Menu Item Descriptions” if you prefer not to edit code. But the built-in method is usually sufficient.

Troubleshooting

• Descriptions appear in the admin but not on the front end. This means your theme doesn’t output them. Add the code snippet from Step 5 to your functions.php.
• The code snippet causes a white screen (fatal error). This usually happens due to a syntax error. Double-check the code, especially quotes and semicolons. If you can’t access your site, use FTP to remove the snippet.
• Descriptions show but are not styled. Add CSS rules to make them look intentional. If they appear inline, add display:block to force them onto a new line.
• Descriptions don’t appear in some menu items. Make sure you saved the menu after adding descriptions. Also, check that the description is not empty.
• Menu layout breaks. If descriptions cause items to wrap or overlap, adjust the CSS to reduce font size or add padding. You might also need to increase the menu container’s width.

Frequently Asked Questions

Do all WordPress themes support menu descriptions?

No, not all themes. Many modern themes do, but some older or custom themes don’t output the description field. You can check by looking for the Description field in Appearance → Menus.

Can I add descriptions without editing code?

Yes, if your theme supports it, you can just type descriptions in the Menu editor. If not, you can use a plugin like “Menu Item Descriptions” to add the functionality without coding.

Will my descriptions be lost when I update my theme?

No, descriptions are stored in the database, not in the theme. They will remain after updates. However, if you added code to your theme’s functions.php, that code will be lost on update unless you use a child theme or a code snippet plugin.

Can I use HTML in menu descriptions?

Yes, you can use basic HTML tags like <em> or <strong> in the description field. They will be rendered as HTML on the front end.

How do I hide descriptions on mobile?

Use CSS media queries to hide the .menu-description class on smaller screens. For example: @media (max-width: 768px) { .menu-description { display: none; } }

What if my theme uses a custom menu walker?

If your theme has a custom walker, the filter above might not work. You’ll need to modify the walker’s start_el method to include the description. Check your theme’s documentation or support forum for guidance.

Related

• IoT Security Threats: The Real Risks
• Rsync Command Builder: How to Build One
• Cybersecurity Skills: Match Learning to Career Goals