Update #4: Using Twitter Bootstrap 2.0 Dropdown Menus with WordPress

Running WordPress on a test instance, it looked like the markup wasn’t quite right.

Essentially, I just added  'container' => false, 'menu_class' => 'nav', options to the menu $args and cleaned the start_el function up a bit.

This stops an extra container div from being created before the ul and adds the nav class to that ul.  The container and everything is left outside of it on purpose, because of all the customizations you may want to do with the responsive options and adding your brand logo… If this was a plugin, there would probably be a options page for handling that stuff, but it remains in loose-code form.

nav class on parent <ul>
clean up code & html

Needs Fixed:
Still not crazy about the code in the start_el function



18 responses

  1. […] 02/17/12 – Updated! Click here for the latest code. After some testing, there were a few fixed… […]

  2. […] 02/17/12 – Updated! Click here for the latest code. After some testing, there were a few fixed… […]

  3. […] 02/17/12 – Updated! Click here for the latest code. After some testing, there were a few fixed… […]

  4. […] 02/17/12 – Updated! Click here for the latest code. After some testing, there were a few fixed… […]

  5. I’ve tried and tried to get this working but my php isn’t to hot. I’ve added the code to my functions.php file and added the bit to my header.php file and my tags all come back blank. Any ideas? Any help would be greatly appreciated.

    1. Sure, I can take a look at it. Can you send me a link if the page is live? Or, can you create a gist or email your code to me at johnmegahan@gmail.com ?

  6. Thanks for your code.
    I would suggest adding this line for proper formatting of the parent menu item:
    $classes[] = ($item->current_item_ancestor) ? ‘active’ : ”;

    1. Thanks for the suggestion, Sascha.
      Does this not take care of that?:
      $classes[] = ($item->current) ? ‘active’ : ”;
      I no longer use WP on a daily basis, so I’ve not been able to keep up on the latest WP/Bootstrap changes.

      1. No, this only applies the “active” class to the current menu item itself, and not to its parents/ancestors.

      2. That makes sense. Thanks. I’ll add it to the code.

  7. It would be awesome if there was a simple way to add a divider or not. Maybe there already is and I am missing it. If it was possible to declare it without modifying the Walker that would be ideal. Any ideas on how that might be done?

    1. Actually, I think you can do so pretty easily with WordPress. Just make sure you have “CSS Classes” checked under “Screen Options” when you create the menu item and give it a class of “divider”… A small problem is that it still wraps it in an A tag… it still works, but it probably wouldn’t be too difficult to tell the walker to not wrap a link with an A tag if it has the css class of “divider”…

  8. It appears I’m running into the same issue as lukelarsen – tags come up blank. Upon further inspection, child links aren’t nesting correctly either.

    Not sure where I’m going wrong – wp_nav_menu is a pain to work with.

  9. You can keep the display_element() function simpler: https://gist.github.com/2724401

  10. thanks for your work on this! It actually took me a sec or two to figure out that I had to pass the walker object as parameter to wp_nav_menu(). I found out about this through this tutorial [ http://wp.tutsplus.com/tutorials/creative-coding/understanding-the-walker-class/ ]. The only thing that was still missing is that the menu class needs to be changed to ‘nav’ for the bootstrap css to kick in. So the final wp_nav_menu() call looks like this:

    'main menu', 'menu_class' => 'nav', 'walker' => new Bootstrap_Walker_Nav_Menu(), 'depth' => 0) ); ?>


  11. Extended this a bit to include support for second and third level dropdown menus (based on category/page hierarchy). If anyone needs that particular bit of functionality, here you go: https://gist.github.com/3137886

  12. Thanks for linking to gists, guys. I switched jobs and don’t use wordpress any longer but if anyone is still having trouble, give me a shout and I’ll try to help you out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: