Create a Custom Shortcode for WordPress Menus

In WordPress, menus play a crucial role in organizing and navigating your website’s content. By default, you can add menus to your theme’s header or sidebar areas using widgets or theme options. However, what if you want to display a menu in a different location, such as the footer? This is where a custom shortcode can come in handy. In this tutorial, you will learn how to create a custom menu shortcode in WordPress using a simple code snippet.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Create the Basic Shortcode Function

To get started, locate and open the functions.php file within your child theme. This file can be found in the root folder of your child theme. Inside the functions.php file, add the following code snippet:

function show_menu_shortcode_fn( $atts ) {
	$atts = shortcode_atts(
		array(
			'menu' => '', // Default value for the menu attribute.
		),
		$atts
	);

	$menu_slug = $atts['menu'];

	$menu_exists = wp_get_nav_menu_object( $menu_slug ); // Check if the menu exists.

	if ( ! $menu_exists ) {
		return 'Menu not found.'; // Fallback message when the menu is not found.
	}

	ob_start(); // Start the output buffer.
	wp_nav_menu(
		array(
			'menu' => $menu_slug,
		)
	);
	return ob_get_clean(); // Return the captured buffer content.
}
add_shortcode( 'show_menu', 'show_menu_shortcode_fn' );

Code language: PHP (php)

This code defines a function named show_menu_shortcode_fn() which acts as our custom shortcode. Let’s break down the code:

• The function accepts the $atts parameter, which represents the attributes passed to the shortcode.
  
• Inside the function, we use shortcode_atts() to merge the provided attributes with default values. In this case, the only attribute is menu, which specifies the menu slug.
  
• We assign the menu slug to the variable $menu_slug.
  
• We then check if the specified menu exists using the wp_get_nav_menu_object() function. If the menu doesn’t exist, we return a fallback message indicating that the menu was not found.
  
• Next, we start the output buffer using ob_start(). This allows us to capture the output generated by the wp_nav_menu() function.
  
• We call wp_nav_menu() with the menu parameter set to the $menu_slug variable, which generates the HTML output for the specified menu.
  
• Finally, we return the captured buffer content using ob_get_clean().

Save the Changes

Save the functions.php file within your child theme after adding the code snippet.

Using the Custom Shortcode

Now that our shortcode functions are ready, we can use them in our posts, pages, or widgets. For example, if you want to show a menu with the slug “main-menu” in the footer section, simply use the following shortcode wherever you want it to appear:

[show_menu menu="main-menu"]
Code language: PHP (php)

Replace “main-menu” with the actual slug of the menu you wish to display.

Customizing the Fallback Message

In the code snippet provided, if the specified menu is not found, the shortcode will return the fallback message “Menu not found.” You can customize this message to suit your needs by modifying the return statement within the if condition.

For example, you can update the fallback message to something like “The requested menu does not exist.” or provide instructions for creating the menu.

That’s it! You have successfully created a custom shortcode for generating menus in WordPress. You now have the flexibility to display menus on your website using the [show_menu menu="menu-slug"] shortcode.

To further enhance your website’s functionality, consider learning how to enable shortcodes in WordPress menus and widgets. Our tutorial on How to Enable Shortcodes in WordPress Menus and Widgets will guide you through the process of adding shortcodes to menus and widgets, allowing you to create dynamic and interactive content throughout your website.