{"id":8252,"date":"2021-02-15T11:36:34","date_gmt":"2021-02-15T11:36:34","guid":{"rendered":"https:\/\/www.wpexpertdeveloper.com\/?p=8252"},"modified":"2021-02-24T04:41:03","modified_gmt":"2021-02-24T04:41:03","slug":"building-wordpress-shortcode-navigation-menu","status":"publish","type":"post","link":"https:\/\/www.wpexpertdeveloper.com\/building-wordpress-shortcode-navigation-menu\/","title":{"rendered":"Building a WordPress Navigation Menu Shortcode for Posts and Pages"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\n

Navigation menu is a built-in WordPress feature, implemented by the theme. We have the ability to add any number of navigation menus from the backend section of WordPress. However, default theme features don’t support displaying menus inside posts or pages. In this tutorial, we are going to build a shortcode for displaying a navigation menu inside a post or page. A shortcode based navigation menu is useful for adding a post or page specific menu instead of the common navigation in the header or footer of the site.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\n

Let’s get started.<\/p>\n\n

This is part of the tutorial series on Building a WordPress Shortcodes Library, where we build shortcodes for common functionalities necessary for WordPress core features, theme features as well as plugin features.<\/strong><\/p>\n\n

Building the Shortcode<\/h2>\n\n

The shortcode created in this section will allow you to add any of the existing menus on your WordPress site to a post or page. The first step in this process is to identify a location for adding the code. We have 3 options for adding the code for the shortcode.<\/p>\n\n

    \n
  1. Using a custom plugin<\/li>\n
  2. Using the functions.php<\/code> file of a child theme<\/li>\n
  3. Using the functions.php<\/code> file of the theme (not recommended as the changes will be wiped out by the theme update)<\/li>\n<\/ol>\n\n

    In this tutorial, we are going to use custom plugin to add the code for the shortcode. If you are not faimilier with creating WordPress custom plugins, use the follwing video to create a plugin and install it.<\/p>\n\n

    <\/figure>\n

    \u00a0<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    <\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\n
    <\/figure>\n

    Now, we can use the following steps to build the shortcode.<\/p>\n\n

    Step 1<\/strong> – Add the following code to define the shortcode and default attributes.<\/p>\n\n

    add_shortcode('sm_navigation_menu','sm_navigation_menu');\nfunction sm_navigation_menu($atts,$content){\n\n    $atts = shortcode_atts( array(\n        'menu_class' => 'menu',\n        'menu' => '',\n        'container' => 'div',\n        'container_class' => '',\n        'echo' => false\n    ), $atts );\n\n    \/\/ Step 2 Code \n}<\/pre>\n\n
    Step 2<\/strong>– Add the following code after the line \/\/ Step 2 Code<\/strong><\/p>\n\n
    $content = wp_nav_menu(\n        array(                \n            'menu' => sanitize_text_field($atts['menu']),\n            'menu_class' => sanitize_text_field($atts['menu_class']),\n            'container'  => sanitize_text_field($atts['container']),\n            'container_class' => sanitize_text_field($atts['container_class']),\n            'echo' => false\n        )\n    );\n\nreturn $content;\n<\/pre>\n\n
    We have to add the complete code to the main file of custom plugin or any other location discussed in the previous section. Now, the shortcode is ready to be used inside a post or page.<\/p>\n\n
    \u00a0<\/p>\n\n
    Understanding the Code<\/h2>\n\n
    First, we added the shortcode using the built-in add_shortcode function. We have named the shortcode as sm_navigation_menu. In Step 1, we also defined the default shortcode attributes and values. Let’s take a look at the attributes and their functionality.<\/p>\n\n