Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
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? –  Topsitemakers Nov 19 '13 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 Nov 19 '13 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. –  Topsitemakers Nov 19 '13 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 Nov 19 '13 at 19:42
add comment

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
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 Nov 19 '13 at 20:15
    
Also, the menu would not show up unless I enter false, for 'container' –  streetfire Nov 19 '13 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? –  Topsitemakers Nov 19 '13 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 Nov 19 '13 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. –  Topsitemakers Nov 19 '13 at 21:22
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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