Create a Custom Shortcode from WordPress Menus

In WordPress, menus serve as essential tools for organizing and navigating your website’s content. While default options allow you to place menus in specific areas like headers or sidebars, what if you need to display a menu in a less common location, such as within the body of a page or post? This tutorial addresses this need by guiding you through the process of creating a custom shortcode directly from your WordPress navigation.

By following these steps, you’ll gain the ability to place menus in diverse areas across your website, such as pages, sidebars, or even within the content of your posts and pages, providing users with enhanced navigation flexibility. This customization is achieved through a simple code snippet integrated into your child theme’s functions.php file, offering a streamlined solution for tailoring your site’s navigation to your specific requirements.

Learn how to create and implement this custom shortcode effectively to optimize your website’s navigation experience and improve user engagement.

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 and Use Custom Shortcode

Save the functions.php file within your child theme after adding the code snippet. 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.

Leave your feedback and help us improve 🐶

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee ☕️ or donating via PayPal 💰.

More free knowledge, because why not?

Your thoughts matter, leave a reply 💬

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