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

  • This part of the question isn't clear: The problem I am having is getting the correct Wordpress PHP code to call the right pages. Also, are you using a custom theme or a contributed theme based on Bootstrap? Commented Nov 19, 2013 at 18:52
  • Sorry let me try and clarify. I am using a custom bootstrap theme. I was trying to implement wp_list_pages, but I can't seem to get the right "arguements" I guess you would say. Looking at this page codex.wordpress.org/Function_Reference/wp_list_pages
    – streetfire
    Commented Nov 19, 2013 at 19:27
  • Why don't you create a menu from WordPress? That should handle the hierarchy automatically and you would just need to override the classes to use Bootstrap styling. Commented Nov 19, 2013 at 19:32
  • That was my first thought. I have done so successfully with other menu's but this menu in particular is for the mobile version. I can't seem to figure out how to implement a stacked COLLAPSIBLE menu using WP's menu system. I do already have some bootstrap styled stacked menu items, but I need this version to be collapsible like the attached image. dl.dropboxusercontent.com/u/73982197/nav.jpg
    – streetfire
    Commented Nov 19, 2013 at 19:42

1 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:


  2. Create the menu in admin.

  3. Use the following code to display it:

        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.

  • Hi that is quite helpful. I already have nav walker installed, version 2.0.2. When I insert the code above, the links give a dropdown arrow/menu. I need the collapse feature.
    – streetfire
    Commented Nov 19, 2013 at 20:15
  • Also, the menu would not show up unless I enter false, for 'container'
    – streetfire
    Commented Nov 19, 2013 at 20:41
  • The collapse feature should be there automatically - all dropdowns turn into collapsibles on small screens. What exactly do you mean by I need the collapse feature? Commented Nov 19, 2013 at 20:53
  • Hm, odd. In that case my dropdowns are not automatically turning into collapsibles. UPDATE: OKAY NM, that seems to be working. Is there anyway to get the collapse feature to work with the nav-stacked option instead of using the navbar?
    – streetfire
    Commented Nov 19, 2013 at 21:20
  • Check the browser's console log for any JS errors. You can see what I'm talking about if you resize the screen on this example layout. Commented Nov 19, 2013 at 21:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.