Header Navbar

Creating a Bootstrap Navbar in WordPress

Bootstrap offers a great component for responsive websites called a "navbar". Navbars are basically your site's header. You can include dropdown-ready responsive menus, inline search forms, or anything you want.

For more information on navbars, see the Navbar Documentation.

Menu Setup

By default Underscores provides a menu for this theme named "Primary Menu", as well as a default menu theme location named "Primary Menu". This is a little confusing, but don't let it worry you too much. Once we setup the menu to work correctly we'll never worry about it again.

Before we get to styling the header, we need to ensure that the primary menu is setup in WordPress.

To do this, let's login to the admin dashboard and go to Appearance >> Menus.

Make sure your primary menu is selected, then scroll to the bottom of the page and check the box that says Theme Location:[ ] Primary Menu. Save the menu.

This setting tells WordPress that this menu will appear in the "Primary Menu" theme location.

Note: While editing the Primary Menu, if you've installed the Theme Unit Test the "Home" link will be setup to go to an external website. Edit that link and change the url to /. This will make it into a real Home link for your own site.

Styling WordPress Menus

WordPress menus present a few challenges when trying to style them. By default, they come with their own set of CSS ids and classes. These CSS ids and classes created when the menu is rendered by what is called a "Nav Walker". Nav walkers are PHP classes that handle recursive output of a menu's HTML.

Basically, it can be really hard to give a menu the HTML you want. And since we're using Bootstrap, we need to have a significant amount of control over the HTML.

Adding a Bootstrap Nav Walker

Enter the Bootstrap Nav Walker class created by Edward McIntyre. This PHP class is a utility for making your WordPress menus render with Bootstrap HTML.

The first thing we need to do is to include this class in our theme.

1. Open the above link and in the right column click "Download Zip".
2. Extract that zip file to your desktop and locate the file named wp_bootstrap_navwalker.php.
3. Copy the wp_bootstrap_navwalker.php file to the inc folder within your theme.
4. Open the functions.php file in your theme, and find a line that starts with: wp_enqueue_script( 'awesomesauce-navigation' ... and delete that line of code completely.
5. Open the js folder in your theme and delete the file named navigation.js.
6. This javascript file is provided by Underscores to make your menus responsive, but since we are going to use Bootstrap for that functionality we no longer need it.
7. Scroll to the very bottom of the file and add the following code on a new line, then save the file.

/**
 * Load the menu nav walker for bootstrap by Edward McIntyre
 * https://github.com/twittem/wp-bootstrap-navwalker
 */
require get_template_directory() . '/inc/wp_bootstrap_navwalker.php';

The above code tells WordPress to always load our new Bootstrap Nav Walker PHP class. But loading the file won't do anything on its own, we have to use it.

Modifying header.php

Now we're going to do some significant edits to the header to make it into a navbar.

1. Locate the line that starts with <header id="masthead" ...
2. Delete that line, and everything in the file that follows it. (yes, everything)
3. Copy the following code, paste it at the bottom of the file (essentially replacing everything you just deleted), then save the file.

	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<small class="text-muted">Menu</small>
				</button>
				<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
			</div>
			<?php 
				wp_nav_menu( array(
					'menu'              => 'primary',
					'theme_location'    => 'primary',
					'depth'             => 2,
					'container'         => 'div',
					'container_class'   => 'collapse navbar-collapse',
					'container_id'      => 'primary-navigation',
					'menu_class'        => 'nav navbar-nav',
					'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
					'walker'            => new wp_bootstrap_navwalker()
				) ); 
			?>
		</div><!-- /.container-fluid -->
	</nav>

	<div id="content" class="site-content container-fluid">

Visit your WordPress site, and you should have a new fancy responsive header with responsive dropdown menus. Huzzah!

The above code is fairly simple, but let's go through it.

• Most of the HTML above was copied from the Bootstrap Navbar example in their documentation. There is no shame in doing so, that is why it is there.
• For the site name (branding), we've used the WordPress home_url() and bloginfo() functions.
• So that our menu items work dynamically (i.e not hard-coded HTML), we have used the wp_nav_menu() function and provided it some Bootstrap related arguments.

Note: Instead of the normal "Hamburger" style menu that the example provides, we've used the actual word "Menu" for the button. Research shows that using the word "Menu" provides a better user experience than using a vague symbol. At the end of the day this comes down to personal preference or design specifications.

wp_nav_walker() and Arguments

There is no need to memorize how this function works, or what arguments it takes, but let's explore its use some more so that we know what is going on.

Argument	Description
'menu' => 'primary',	Use the menu slug provided by Underscores. Its name is "Primary Menu", and it's slug is "primary".
'theme_location' => 'primary',	This menu belongs in the "Primary Menu" theme location.
'depth' => 2,	How many levels of the hierarchy are to be included where 0 means all.
'container' => 'div',	The HTML element that should wrap the list of menu items.
'container_class' => 'collapse navbar-collapse',	HTML classes to apply to the container element.
'container_id' => 'primary-navigation',	HTML id to apply to the container element.
'menu_class' => 'nav navbar-nav',	HTML classes to apply to the menu element (<ul>)
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',	If the menu doesn't exist, the fallback function to use. This was suggested by the Bootstrap Nav Walker documentation.
'walker' => new wp_bootstrap_navwalker()	Our new Bootstrap Nav Walker! This is where we have implemented the new file that we added to our theme earlier. This is the line of code that tells the menu to render using the Bootstrap HTML.

Whew. That's a lot. Good thing we don't need to memorize it.

If you need to add a menu to your WordPress theme in the future, refer to the codex documentation on this function: wp_nav_menu()