Parent Page > Child Page Menu

Question

I am trying to create a collapsible menu using Bootstrap. The problem I am having is getting the correct Wordpress PHP code to call the right pages. Also this menu will be displayed on these child pages.

I would like the menu hierarchy to look like this:

Specific Page 1 --- Child Page One --- Child Page Two

Specific Page 2 --- Child Page One --- Child Page Two

Answer 1

You have to create a new navigation walker class in your theme, in which you will override the default output to match the one required by Bootstrap.

Download a drop-in nav walker class for Bootstrap here and do the following:

1. Load the new walker class in your theme's template.php file:

   require_once('wp_bootstrap_navwalker.php');

2. Create the menu in admin.

3. Use the following code to display it:

   <?php
       wp_nav_menu( array(
           'menu'              => 'primary',
           'theme_location'    => 'primary',
           'depth'             => 2,
           'container'         => 'div',
           'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
           'menu_class'        => 'nav navbar-nav',
           'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
           'walker'            => new wp_bootstrap_navwalker())
       );
   ?>
   

Check out also this article which explains how to do this using the same existing class for Bootstrap.