0

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?

2

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 );
  • This solution does exactly what I needed, thanks a lot! – Terix Mar 4 '14 at 16:39
0

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>'
));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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