How to Enable Shortcodes in WordPress Menus and Widgets

Shortcodes in WordPress allow users to easily add dynamic content, such as buttons, forms, or custom post types, to their posts, pages, and widgets. Imagine you want to show your related posts in the sidebar, social share icons in the navigation, or anything else you created a shortcode for.

By default, WordPress does not support shortcodes in its menu and widget areas. However, you can easily enable this functionality through the functions.php file. This tutorial provides a step-by-step guide on how to enable shortcodes in WordPress menus and widgets.

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.

Make sure to use this in combination with shortcode_unautop. This will ensure you that the output of our shortcode callback is not wrapped in paragraph tags.

Add a priority so that do_shortcode runs after wpautop. The default filter priority for shortcodes in posts is 11 (source).

Access the functions.php file: Log in to your WordPress dashboard, go to Appearance > Theme Editor, and select the functions.php file from the right-side list. Add the following code snippet:

Enable shortcodes for menu navigation:

/**
 * Enable shortcodes for menu navigation.
 */
if ( ! has_filter( 'wp_nav_menu', 'do_shortcode' ) ) {
    add_filter( 'wp_nav_menu', 'shortcode_unautop' );
    add_filter( 'wp_nav_menu', 'do_shortcode', 11 );
}
Code language: PHP (php)

Enable shortcodes for widgets (footer, sidebar…):

/**
 * Enable shortcodes for widgets (footer, sidebar...).
 */
if ( ! has_filter( 'widget_text', 'do_shortcode' ) ) {
    add_filter( 'widget_text', 'shortcode_unautop');
    add_filter( 'widget_text', 'do_shortcode', 11);
}
Code language: PHP (php)

After adding the code, save the functions.php file and test that the shortcodes are working correctly, go to Appearance > Menus and add a shortcode to a menu item’s description or add a shortcode to a text widget.

Note: It’s crucial to be cautious when editing the functions.php file, as a small mistake in the code can result in your website not functioning correctly. To avoid any issues, it’s recommended to make a backup of the file before making any changes.

That’s it! Enabling shortcodes in WordPress menus and widgets is a simple process that can greatly enhance the functionality of your website. By following this step-by-step guide, you can easily add dynamic content to your menu and widget areas and customize your website as per your requirements.

If you want to learn more about creating custom shortcodes for menus, check out our tutorial on Create a Custom Shortcode for WordPress Menus with Translation Support. This tutorial will teach you how to generate menus using custom shortcodes and handle translations using plugins like WPML. With these two tutorials combined, you’ll have the power to create versatile and interactive menu experiences on your WordPress website.

Don’t forget to make a backup of the functions.php file before making any changes to minimize the risk of any issues.

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?

2 Comments

    • Hi jj,

      Add the following code to your functions.php:

      /**
       * Enable shortcodes for menu navigation.
       */
      if ( ! has_filter( 'wp_nav_menu', 'do_shortcode' ) ) {
          add_filter( 'wp_nav_menu', 'shortcode_unautop' );
          add_filter( 'wp_nav_menu', 'do_shortcode', 11 );
      }
      

      After that, add your shortcode, for example [total_post_count], as the Navigation Label of your menu item. See screenshot:

      Hope that helps!

      Reply

Your thoughts matter, leave a reply 💬

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