Advertisement
  1. Code
  2. Theme Development
Code

How to Integrate a Bootstrap Navbar Into a WordPress Theme

by
Difficulty:BeginnerLength:QuickLanguages:

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.

Looking for a Shortcut?

If you need to get this done quickly and reliably, you can find plenty of Bootstrap and WordPress experts over on Envato Studio who can help you.

Bootstrap experts on Envato Studio
Bootstrap experts on Envato Studio

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.

You can also find some great Bootstrap themes and templates on Envato Market, such as the Neon Bootstrap Admin Template or the Selphy Electronics eCommerce Boostrap Template.

Neon Bootstrap Admin Template
Neon Bootstrap Admin Template
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.