Add a WordPress Menu
The first thing you need to do is to add a WordPress menu. If you’ve already done this, or are using one of your theme’s existing menus, then skip to the next section.
Find your theme’s setup function (usually inside the
functions.php file) and add the register_nav_menus(); function your new menu. If you can’t find a setup function in your theme that’s ok, just create one that’s the same as the following.You could also add this to a custom functionality plugin if you would rather but it’s probably best to keep theme components inside the theme files.
function mytheme_setup() {
register_nav_menus(
array(
'footer_nav' => __( 'Footer Menu', 'bootpress' ),
'top_menu' => __( 'Top Menu', 'bootpress' )
)
);
}
add_action( 'after_setup_theme', 'mytheme_setup' );This code registers 2 theme menu spots, the footer_nav and the top_menu. We will only be using one of these –
top_menu – to create our Bootstrap WordPress responsive menu but you could add as many custom menus here as you want.Using Bootstrap with WordPress wp_nav_menu() Function
WordPress default menu markup doesn’t work to create Bootstrap Navbars. You have to make serious adjustments by passing a bunch of parameters to the wp_nav_menu() function to override the default behavior and add custom wrappers with Bootstrap mark-up. Even then it still doesn’t have the full responsive functions or the ability to add the extras that Bootstrap provides.
To get past the limits of what Bootstrap with WordPress default menus can do when you make the adjustments like that. To have a true Bootstrap menu you need to have a custom walker.
WordPress Menu Navwalker Classes
What a custom navwalker class does is extend, and change, how the menu input gets handled and how the output is created. Withing a custom navwalker you have complete control over how the menu behaves.
To create a custom navwalker you have to extend the navwalker class.
Bootstrap Responsive WordPress Menu Walker Class
I don’t have to go into details about how to create a Bootstrap navwalker class and extend the existing class – because Twittem created one that works great and uploaded it to Github. Just download it and include it in your theme – it has been updated to work with Bootstrap 3 but a Bootstrap 2 branch is available.
Including it in your theme is easy, just copy the
wp-bootstrap-navwalker.php file into your theme then add the following line to your functions.php file.// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
Adding the Bootstrap Responsive Menu to your WordPress Theme
Now that we can run the custom menu through the Bootstrap navwalker all we have to do is add it to the pages.Adding it to the page is just a case of calling the wp_nav_menu() function with a handful of parameters.
The following code works with BS2 and BS3. If your using it with Bootstrap 2 you can remove the
navbar-nav class.<?php
wp_nav_menu( array(
'theme_location' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
I want my menu to go in a navbar at the top of the pages but using similar code to create all kinds of bootstrap menus wherever you want. You can replace the navbar-nav with nav-pills or nav-tabs to make the kind of menu you want. You would probably want to add nav-justified too to center the items in the menu if you were not making a responsive navbar.
I’ll be placing the code to create my menu in the header.php file so I can make it a top menu. If you want to have it in a different place then just paste this code in wherever you want it to appear.
To make a responsive navabar you need to wrap the above code in some more mark-up. The block of code below is the responsive navbar code from the Bootstrap Docs with the Bootstrap Navwalker code included in the right place. It’s ready to paste right into your theme – but remember to change the theme_location parameter to the name you gave your menu when you registered it.
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">SITE TITLE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php
wp_nav_menu( array(
'theme_location' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</nav>
Headers, Dividers and Menu Icons with Glyphicons
The navwalker class lets you use the extras that Bootstrap provides like Glyphicons and dividers. These can be set in the menu by adding the appropriate class names to the Navigation Label or Title Attribute box when you create your menu items and it will add the necessary tags.
Add the glyphicon class name to the Title Attribute box to add an icon to the menu item. To make a divider you do it by adding a custom link with the href value of ‘#’ and the name of divider.
For a header do the same but give it the name of header and place the text you want to appear in the Title Attribute box.
If you want to swap out Glyphicons for Font Awesome that’s a pretty simple process and to use them with the navwalker you just need to include the correct class names in the boxes after you include Font Awesome on your site.