Alternative Methods For Adding Menu Descriptions In WordPress

WordPress navigation menus are a core feature that allow site owners to create menus that link to various pages and custom links across their site. However, the core menu functionality lacks a built-in way to add descriptions and supplementary text to menus and menu items.

This article will explore multiple methods that can enable descriptions for navigation menus in WordPress. We will cover functionality missing from core WordPress, leveraging custom Walker classes to modify menu output, using filters to tweak menu HTML, as well as plugin solutions. By the end, you should have a solid grasp of the pros, cons and implementation details of various solutions to add metadata like descriptions to your WordPress menus.

Functionality Missing from Core

The core WordPress menu administration screens and database architecture contain no explicit support for adding descriptions or other metadata to menus or menu items. The wp_nav_menu database table consists of just an ID, name, slug, URL, parent ID, and order number.

Likewise, the native menu editor screen at Appearance > Menus provides an interface to populate the various rows in wp_nav_menu, but does not accommodate descriptions, images, or other attributes on a per-menu or per-link basis. Software architecture and user interface both fail to consider descriptions of any kind.

Using Custom Walker Classes

Walker classes in WordPress allow developers to filter and modify the front-end display of navigation menus. This opens the door for functionality not present in core. By hooking a custom Walker into the wp_nav_menu rendering process, we can inject additional data like descriptions into menu output.

Example: Extending Walker_Nav_Menu Class

WordPress includes a Walker class called Walker_Nav_Menu that generates anchored list output for navigation menus. We can create a subclass of this that looks for description fields and adds them to anchors.

For example, we could add a nav_menu_desc database column with a text description for each menu link. Then extend Walker_Nav_Menu to populate a description attribute on anchors:

class Menu_With_Descriptions_Walker extends Walker_Nav_Menu {

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    global $wpdb;
		
    $descr = $wpdb->get_var("SELECT nav_menu_desc FROM wp_nav_menu WHERE ID=$item->ID");
    
    $output .= '';
  }

}

With this walker class added, enabling descriptions is a matter of:

  1. Adding the nav_menu_desc column to wp_nav_menu via a plugin or custom code
  2. Saving descriptions for menu items using SQL, import scripts, or a custom meta box interface
  3. Passing the new Menu_With_Descriptions_Walker as the walker argument for wp_nav_menu() calls

This unlock descriptions by tapping into the internal API where WordPress assembles menu output HTML.

Additional Walker Class Examples

Some other examples of augmenting menu output with custom walker classes:

  • Add schema.org microdata to menus for richer semantic markup
  • Integrate descriptions from post excerpt or custom fields
  • Auto-generate descriptions from post content
  • Insert menu-specific CSS classes for styling
  • Reorganize menu structure like subfolders for long menus

Walker classes provide low-level access to filter menu HTML and output. Developers with PHP experience can customize menu presentation in unlimited ways.

Modifying Menu Output via Filters

In some cases, using filters to modify menu HTML after generation is easier than writing custom walkers. Filters hook into menu output at specific points.

Example: Adding Schema Markup with Filters

For example, to add schema.org metadata to menus, we can use the nav_menu_link_attributes filter:

/**
 * Add schema.org attrs to nav links
 */
function my_schema_menu($atts) {

  //Add itemtype and itemprop schema attributes
  $atts['itemtype'] = 'https://schema.org/SiteNavigationElement';
  $atts['itemprop'] = 'url'; 

  return $atts;

}
add_filter('nav_menu_link_attributes', 'my_schema_menu');  

Now every menu link will contain machine-readable metadata identifying it as part of site navigation markup.

As another simple example, we could append link titles or descriptions using the walker_nav_menu_start_el filter:

/**
 * Add description to anchor text
 */

function my_menu_desc($item_output, $item) {
	
	//Retrieve description
	$desc = get_metadata('nav_menu', $item->ID, 'menu_description', true);
	
	$description = ! empty( $desc ) ? '' . esc_attr( $desc ) . '' : '';

	//Append description span to anchor text
	$item_output = $item_output . $description;
	
	return $item_output;
}
add_filter('walker_nav_menu_start_el', 'my_menu_desc', 10, 2);

These examples demonstrate using filters to modify the final HTML after heavy lifting done in walker class.

Additional Filter Examples

Some other possible applications of menu filters include:

  • Restrict menu access by user role
  • Create menu buckets or tabs from long menus
  • Associate thumbnails with top-level links only
  • Customize depth of dropdown submenus

Filters enable targeted customization by tying into specific steps in the menu rendering pipeline within WordPress core.

Menu Description Plugins

Given the demand for descriptions alongside menus, plugin developers have tackled this need with purpose-built solutions. Let’s analyze the pros, cons, and highlights of leveraging descriptions via plugins.

Pros of Plugin Solutions

Plugins encapsulate implementation details and furnish readymade interfaces. Benefits include:

  • Quick installation – Upload and activate without code changes
  • User friendly – UI for easy description input
  • Design agnostic – Handle adding descriptions independently of front-end menu styling
  • Adapt existing menus – Retroactively add descriptions for current menus
  • Accessibility – Provide schema markup for screen readers

In other words, plugins serve menu descriptions without development lift for the site owner. The plugin author handles the coding complexity.

Cons of Plugin Solutions

On the downside, plugins exhibit some universal drawbacks:

  • Resource overhead – Database queries and processing load to populate descriptions
  • Dependency – If plugin goes away or breaks, descriptions break too
  • Potential conflicts– Complex plugins may clash with other plugins/functionality
  • Bloat – Many plugins add unused code to WordPress installs

So while plugins provide convenience, they also introduce external dependency plus performance and security considerations given additional code.

Choosing the Best Method for Your Needs

When evaluating approaches to integrate menu descriptions, which method makes the most sense for your goals and context?

Let’s explore factors to consider when deciding on an implementation strategy.

Factors to Consider

  • Customization needs – Do you want complete control for exotic output customization? Walker classes provide more flexibility than pre-packaged plugins.
  • Development resources – Do you have PHP experts on staff? If not, plugins may serve needs adequately without custom code.
  • Performance constraints – Complex plugins may burden servers running WordPress. Custom code generally loads leaner.
  • Accessibility requirements – If accessibility is a prime concern, leverage schema markup in walker classes or filters.
  • User experience – Plugins often furnish turnkey admin interfaces for fast menu updates.
  • Security preferences – Code auditing is easier for custom classes versus third-party plugins requesting broad privileges.

In summary – factor in resourcing, performance, UX and security priorities for your use case.

Summary of Options

As an overview, let’s recap approaches for adding menu descriptions in WordPress:

  • Walker classes – Primary technique relying on custom development
  • Filters – Light custom code harnessing hooks into menu rendering process
  • Plugins – No code solution but potential downsides exist

Now that we’ve surveyed this landscape, you should better understand how to augment standard WordPress menus with descriptive metadata using the coding solution optimal for your needs.

Leave a Reply

Your email address will not be published. Required fields are marked *