WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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>

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
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 '14 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>.

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

Your Answer


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.