Bootstrap Navbar Into WordPress

This tutorial is on how to integrate Bootstrap 3 navbar into WordPress Theme

I assume you already know about Bootstrap and use it in mock-ups for development. This raises the question: “How can you integrate Bootstrap components into a WordPress theme?” And above all most useful and essential Bootstrap component for integration into WordPress is definitely navigation. So let’s start with the Navbar component which allows easy creation of a responsive navigation bar.

1. Code Your Navigation With the Bootstrap Framework

You can use source code from Bootstrap documentation page or your own code. I will use code from one of my projects, and here it is:

<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<!-- Collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-content">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo text -->
<a href="#" class="navbar-brand">Website Name</a>
</div>

<div class="collapse navbar-collapse" id="nav-content">
<!-- Navigation items -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop menu <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Something else</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Let’s have a quick look at the code and clarify things.

Wrapper nav tag with its classes wraps the whole content of the navigation bar:

<nav class="navbar navbar-inverse" role="navigation">.....</nav>

Header div tag with its class which is visible on all screens sizes:

<div class="navbar-header">.....</div>

Toggle button which shows content on small screens. This button is a must but you can change content inside it or style it differently with CSS:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-content">.....</button>

Brand, a link with the logo, image or both – it is optional. You can omit it here and include it elsewhere:

<a href="#" class="navbar-brand">Website Name</a>

Collapsible content, it contains all navigation links which will be “collapsed” on small screens:

<div class="collapse navbar-collapse" id="nav-content">.....</div>

2. Prepare Your Theme for the Menu

This step assumes that you already have WordPress installed, the theme you’re developing has been activated, and only thing you have trouble with is integrating Navbar component.

Download Edward McIntyre’s wp-bootstrap-navwalker class from GitHub (where is well documented how to achieve this). Place the file into your theme root folder. Open functions.php file for your theme (or create it if you didn’t already) and paste the following code:

<?php
require_once('wp_bootstrap_navwalker.php'); /*Register custom navigation walker*/
register_nav_menus(
array(
'primary' => __('top_menu', 'Main Menu'),
)
);
?>

This is a little extra. This is a proper way to call bootstrap.js for WordPress (place it in functions.php if you didn’t or you called it from your header):

<?php
/*Function to enqueue bootstrap script with jQuery*/
function wpbootstrap_script_with_jquery() {
wp_register_script('bootstrap3_js_script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery'), '3.2.0');
wp_enqueue_script('bootstrap3_js_script');
}
?>

Although you can call bootstrap css file in the same manner I personally prefer to import it in the beginning of my style.css like this:

@import url('bootstrap/css/bootstrap.min.css');

3. Integrate Navigation Bar HTML Mock-Up Into a Template

Open your header.php and replace the navigation bar mock-up with WordPress template functions:

<!-- Logo text -->
<a href="#" class="navbar-brand">Website Name</a>

with:

<!-- Logo text -->
<a href="<?php echo home_url(); ?>" class="navbar-brand"><?php bloginfo('name'); ?></a>

and this:

<div class="collapse navbar-collapse" id="nav-content">
<!-- Navigation items -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Почетна</a></li>
<li><a href="#">Издања</a></li>
<li><a href="#">Контакт</a></li>
<li><a href="#">Ставка 4</a></li>
<li><a href="#">Ставка 5</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Падајући мени <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Линк</a></li>
<li><a href="#">Још један линк</a></li>
<li><a href="#">Нешто друго</a></li>
</ul>
</li>
</ul>
</div>

with:

<?php
wp_nav_menu(
array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'nav-content',
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
);
?>

With this step, Bootstrap Navbar component has been integrated into your theme, hooray!

4. Create a Menu in the Back-End

Last step is to add some menu items to your menu. Navigate to your WordPress site back-end Appearance->Menu. Create a new menu called “Primary” and add items to it. Go to tab Manage Locations and for theme location called “Primary” assign the menu “Primary”. Save changes.

5. Conclusion

In this tutorial we have studied how to integrate Bootstrap Navbar Into WordPress (Bootstrap 3.2.0 was this particular example) into a WordPress theme, and I tested it for WordPress versions 3.8, 3.9 and 4.1.

Integrate Bootstrap Navbar Into WordPress