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 have a simple 4 item menu on wordpress. I want to use the bootstrap button style for this menu.

This is the hand-made code of what I want to get.

<div class="menu-menu-container">
<ul id="menu-menu" class="btn-group">
<li id="menu-item-16" class="btn btn-default"><a href="http://localhost/test/?page_id=5">Link 1</a></li>
<li id="menu-item-15" class="btn btn-default"><a href="http://localhost/test/?page_id=7">Link 2</a></li>
<li id="menu-item-14" class="btn btn-default"><a href="http://localhost/test/?page_id=9">Link 3</a></li>
<li id="menu-item-13" class="btn btn-default"><a href="http://localhost/test/?page_id=11">Link 4</a></li>
</ul></div>

I have no clue on how to tell wp_nav_menu() to build the menu in this way. I am working over twentythirteen as starting theme so I have to change the default menu to this style I want.

I tried to use this guide but I wan't able to get the result I want. Does anyone have a solution for this?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

The following should setup your menu with the correct classes and IDs applied to your container and ul. The codex entry for wp_nav_menu lists all the possible arguments.

wp_nav_menu( array( 
    'theme_location' => 'primary', 
    'container_class' => 'menu-menu-container', 
    'menu_id' => 'menu-menu', 
    'menu_class' => 'btn-group' 
) );

You can then add the required classes to the menu items by using the nav_menu_css_class filter.

function my_special_nav_class( $classes, $item ) {
    $classes[] = 'btn btn-default';
    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
share|improve this answer
    
This solution does exactly what I needed, thanks a lot! –  Terix Mar 4 at 16:39

I don't think there's an easy way to add classes the list items themselves, but it would be easy to wrap a <span> with the desired class names around the <a>.

wp_nav_menu(array(
    'theme_location' => 'your-theme-location',
    'before' => '<span class="btn btn-default">',
    'after' => '</span>'
));
share|improve this answer

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.