Integrate Bootstrap Navbar to Speed-up Wordpress Theme Development

There are many instances when you want to speed-up the theme development process, and look out for ways to do it. One of the easiest methods to speed-up theme development is including bootstrap components to your wordpress theme. Here you will learn how to integrate bootstrap navbar in your Wordpress theme to speed-up the overall theme development process.

Code with Bootstrap Framework

First you will need to introduce the code for bootstrap framework before you integrate navbar. You will need to initiate the code into the navigation bar

<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="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>
</nav>

Let's try and understand major portions of the code that will help towards integration.

<nav role="navigation">…</nav>

In this code, the tag –a<nav> with the class <navbar> wraps the content meant for navigation bar

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button>

This button helps collapse content on the screen. This is an important button, and you can easily change the content within the button

<ul class="nav navbar-nav">…</ul>

This code represents the site navigation, which is the main component in here.

Integrate the Navbar to the Template

The assumption made while writing this code is that you have installed the Wordpress theme and have activated it too

Start with registering your navigation bar to the functions.php file

<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {  
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;
?>

Next, register the different bootstrap files as well as the jQuery file to this path

function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Download the wp-bootstrap-navwalker and store it in the theme's root folder. Now paste the code below in the functions.php file

<?php // Register custom navigation walker
    require_once('wp_bootstrap_navwalker.php');
?>

Now that your frontend work is done, let's move to the backend. You will need to create a menu in the backend as well.

Go to Appearance>Menu>Create New Menu>Manage Locations. Assign primary location to the new menu created and save it.

Finally you will need to integrate the navigation bar into your template

Go to header.php and replace

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

With

<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>

Replace mock-up menu with output menu in the backend

Replace the following

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
</ul>

With

<?php /* Primary navigation */
wp_nav_menu( array(
  'menu' => 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())
);
?>

With these steps followed judiciously, you have integrated the bootstrap navbar to your Wordpress theme. Now, you can get started with integrating other components, as per your need.

Conclusion

Bootstrap components help in speeding up the process of theme development, which is highly important for your Wordpress website. Installing a theme and activating it while ensuring a good user interface is a job well done when you have the right bootstrap components. Here you learnt how to integrate the bootstrap navbar for intuitive navigation.

Note: Backing up your data before customizing is a must

Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding WordPress tips & tricks. If you are looking for hire wordpress expert then just get in touch with her.