Yesterday I was playing with Bootstrap 3, a framework to create HTML pages with a flexible grid and a lot of ready to designed components.

Bootstrap has a navigation bar component that can be used to create a menu like the ones we find on almost every site.

Is possible to adapt the default navigation menu of WordPress to the structure needed by Bootstrap 3? The best possible thing is to be able to “force” WordPress to print out a menu with the classes required by Bootstrap, so it can activate the layout and the drop down features.

Digging into the WordPress code and looking around to others’ solutions, I find a couple of modifications to deal with that problem.

The code below, once added to a theme functions.php file, adds some required classes to the menu items, so Bootstrap can recognize them and give the correct style to the menu.

It’s not enough, the menu needs to be called with some parameter detailed on the second block of code.

add_filter('nav_menu_css_class', 'ss_nav_menu_css_class', 10, 3);

function ss_nav_menu_css_class($classes, $item, $args) {
    if (array_search('menu-item-has-children', $classes) !== false) {
        $classes[] = 'dropdown';
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'ss_nav_menu_link_attributes', 10, 3);
function ss_nav_menu_link_attributes($atts, $item, $args) {
    if (array_search('menu-item-has-children', $item->classes) === false) return $atts;
    $atts['data-toggle'] = 'dropdown';
    $atts['class'] = 'dropdown-toggle';
    return $atts;
}

class SS_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= '<ul class="dropdown-menu">';
    }   
}

To create the top bar (in this example fixed on the top using the “navbar-fixed-top” class) the code below is used. Note that the WordPress menu is only a part of the topbar, leaving space to add some other elements, like a search box or other things, like social icons.

The generated bare remain fully responsive and you can configure the menu using the WordPress tools.

Pay attention that in this example the menu location is named “main”, so it must be registered with register_nav_menu(‘main’, ‘Main menu’) and a menu must be created and associated to this “location” otherwise a default WordPress menu is used and not correctly style. The default menu can be disabled setting “fallback_cb” to false in the parameters of the wp_nav_menu() function.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
        <div class="navbar-collapse collapse">
            <?php wp_nav_menu(array('location' => 'main', 'menu_class' => 'nav navbar-nav', 'container' => false,
                'walker' => new SS_Walker_Nav_Menu()));
            ?>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
</div>

Similar Posts

Leave a Reply