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'm using twitter bootstrap in my theme. I'm trying to use bootstrap menu in my theme. But it use custom attributes like data-toggle.

Here is the full code.

<ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>

Can anyone help me to optimize this code for wp_nav_menu() ?

Update:

This is what i tried so far.

1) Custom submenu class

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

2) wp_nav_menu

<?php wp_nav_menu( array( 'items_wrap' => '<ul class="nav">%3$s</ul>','walker' => new My_Walker_Nav_Menu() ) ); ?>

Can you help me to add that "dropdown" class and this link

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

share|improve this question
add comment

4 Answers

up vote 4 down vote accepted

For a copy paste solution check this custom Walker out: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

It's missing one or two things like data-toggle="dropdown" and <b class="caret"></b>.

It should be quite easy to figure that out, but here's my modified version: https://gist.github.com/1817371

Hope that helps.

share|improve this answer
    
Thanks for this. I don't have the code in front of me, but I literally was pulling my hair out trying to figure out how to get a had_children property. Is this documented anywhere by chance? (the post WP3.4 version I mean) –  Jon Jaques Feb 24 '13 at 15:22
    
I'm not sure, but @Jan Fabry has a short explanation in this thread –  Duane Apr 11 '13 at 15:30
add comment

See this answer for details: Look for menu_item_parent and set class="dropdown-toggle" conditionally.

More similar questions.

share|improve this answer
    
Hello toscho, thanks. Check this page. That is what i exactly looking for. I tried those codes. Since i'm not a php expert i couldn't make it work. Can you help me with this answer? Thanks –  Giri Feb 3 '12 at 21:41
add comment

I used a different approach than a custom walker. I used a function to add the class "dropdown" to any parent nav items which contain sub menu items. Since WordPress outputs the class "sub-menu" by default, I use jQuery to add the class "dropdown-menu" to any thing that has a class of "sub-menu". I then use jQuery to append the <b class="caret"></b> element.

I have written this up as a complete tutorial about how to implement the Bootstrap dropdown in a WordPress nav menu here: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

share|improve this answer
add comment

Try WP Bootstrap Menu if your not looking for something complicated.

You have to replace the native wp_nav_menu() with a custom function from the plugin in your theme to get it working. Be aware the plugin function is not compatible with other plugins, it doesn’t offer the same filters as the WordPress walker.

share|improve this answer
    
An answer should be more than just a link to an external site. Please add a solution. –  toscho Jan 23 '13 at 4:59
    
Ah sorry I didn't know, I don't know what to add, that plugin generates exact code with a custom function that's needed to work with bootstrap –  farhan Jan 24 '13 at 6:15
    
I made an edit to show how it could look: describe how it works and what the most important changes are. Still not ideal, but later readers can judge faster if they want to use it. –  toscho Jan 24 '13 at 6:23
    
Thank you, I'll add details like that next time when I post –  farhan Jan 24 '13 at 23:59
add comment

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.