WordPress Bootstrap Menu ShortCode

We’re going to create a ShortCode allowing you to display any WordPress Menu anywhere on your website, using Bootstrap Navbar markup.

First, we need to create a file in our (Child) Theme or Plugin where you plan to register the ShortCode which will hold the Navwalker to map the WordPress Menu into the Bootstrap Navbar markup. You can name the file anyhow you want, or even include the code in your (child)Theme functions.php directly. This is the code we’ll need to save in the file or functions.php:

Then, we register the ShortCode where we will add ShortCode attributes to control the Menu Output further. Actually, we’ll register two shortcodes, one for the Menu, the other for the Collapsed Button on mobiles, so we can put the Menu and its Mobile Collapsed Button separately on the page if we want

Register The Menu ShortCode

function tkt_bs_menu_callback($atts, $content = null) {

    'name'              => null,//menu name
    'depth'             => null,//depth (n)
    'container'         => null,//div
    'container_class'   => null,//collapse navbar-collapse
    'container_id'      => null,//ID for collapse, prefix for uniqueness
    'menu_class'        => null,//'nav navbar-nav'
  ), $atts));

  return wp_nav_menu( array(
    'name'              => $name,
    'depth'             => $depth,
    'container'         => $container,
    'container_class'   => $container_class,
    'container_id'      => $name.'-'.$container_id,
    'menu_class'        => $menu_class,
    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
    'walker'            => new WP_Bootstrap_Navwalker(),
    'echo'              => false,
  ) );


add_shortcode('tkt_bs_menu', 'tkt_bs_menu_callback');

Register The Mobile Collapsed Menu Button ShortCode

function tkt_bs_mobile_button_callback($atts, $content = null) {

    'name'              => null,//menu name
    'class'             => null,//navbar-toggler float-right
    'type'              => null,//button
    'data_toggle'       => null,//collapse
    'data_target'       => null,//ID for collapse, prefix for uniqueness
    'aria_controls'     => null,//ID for collapse, prefix for uniqueness
    'aria_expanded'     => null,//false
    'aria_label'        => null,//Toggle navigation
    'span_class'        => null,//navbar-toggler-icon
  ), $atts));

  $button = '<button class="'.$class.'"  type="'.$type.'" data-toggle="'.$data_toggle.'" data-target="#'.$name.'-'.$data_target.'" aria-controls="'.$name.'-'.$aria_controls.'" aria-expanded="'.$aria_expanded.'" aria-label="'.$aria_label.'"><span class="'.$span_class.'"></span></button>';

  return $button;

add_shortcode('tkt_bs_mobile_button', 'tkt_bs_mobile_button_callback');

How to use the ShortCodes

You can now insert the registered ShortCodes anywhere on your site, passing the values as desired to the ShortCode, to output the WordPress menu with Bootstrap markup:
[tkt_bs_menu name="Menu_Name" depth="4" container="div" container_class="bcollapse navbar-collapse" container_id="Unique ID" menu_class="nav navbar-nav"]
[tkt_bs_mobile_button name="Menu_Name" class="navbar-toggler float-right" type="button" data_toggle="collapse" data_target="Unique ID" aria_controls="Unique ID" aria_expanded="false" aria_label="Toggle Navigation" span_class="navbar-toggler-icon"]