64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

How to Integrate Bootstrap Navbar Into WordPress Theme

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and 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?"

This series of tutorials will cover integration of most popular Bootstrap components into a WordPress theme. Let's start with the Navbar component which allows easy creation of a responsive navigation bar. To keep this tutorial easy to follow I will take a navigation bar which consists of just a logo and menu.


1. Code Your Navigation Bar With the Bootstrap Framework

Here is source code from Bootstrap documentation page:

Let's have a closer look at the code and clarify things for a better understanding of the next part of the tutorial.

Wrapper - a <nav> tag with class "navbar" and role "navigation" wraps the whole content of the navigation bar.

Header – a <div> with class "navbar-header" which is visible on any size screens.

Toggle button - a <button> which represents collapsed content on small screens; this button is a must but you can change content inside it.

Brand – a link with the logo; it is optional, you can omit it here and include it elsewhere.

Collapsible content - a <div> with class "collapse" and "navbar-collapse"; it contains all content which should be collapsed on small screens.

Menu – a <ul> with class "nav navbar-nav" which represents site navigation.


2. Integrate the Mock-Up Into a Template

This step assumes that you already have WordPress installed and the theme you're developing has been activated.

2.1. Prepare Your Theme for the Menu

Open your functions.php file and register your navigation if you haven't yet.

Register bootstrap files and jQuery:

Download Edward McIntyre's wp-bootstrap-navwalker class from GitHub. Place the file into theme root folder. Go back to your functions.php and paste the following code:

2.2. Create a Menu in the Back-End

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.

Wordpress Menu Management Page
Wordpress Menu Management Page

2.3. Integrate Navigation Bar Mock-Up Into a Template

Open your header.php and copy & paste the navigation bar mock-up into the place where you want it to appear. Now we replace parts of the mock-up with WordPress' template functions. Firstly place the correct link for the logo. Change this line:

to:

The next step is to output the menu from the back-end intead of the mock-up Menu. For these lines:

With:

Now you have bootstrap Navbar component integrated into your theme.


Conclusion

In this tutorial we have studied how to integrate a navigation bar created with the Bootstrap CSS framework into a WordPress theme. To speed-up theme development you can simply download the source files and paste them into your theme.

Check out some great Themes and Templates created with Bootstrap on ThemeForest

Advertisement