HostOnNet Blog

How to use Bootstrap Navbar in WordPress Theme

Looking for Linux Server Admin or WordPress Expert? We can help.

If your are trying to convert wordpress theme into bootstrap,one of the first issue you will find is to have the navbar integrated with the wordpress menu.

I used bootstrap menu for my wordpress blog. It looks like this:

screenshot

But when I change window size to smaller in Mozila Firefox by pressing ALT + SHIFT + M , WP menu just disappears.

Here is the code i used before.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

After doing little search i got the solution from http://stackoverflow.com/questions/20537743/navbar-collapse-not-working-in-bootstrap

It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js

Here comes the other parts of Integrating Bootstrap3 Navbar Into WordPress and using this tutorial you can fix the following issues

1). Bootstrap and WordPress Nav Menu
2). navbar collapse not working in bootstrap
3). Make WordPress Navbar Work With Bootstrap
4). Build a Bootstrap WordPress Responsive Menu
5). Making wp_nav_menu work with Bootstrap 3

Edit functions.php file and add the following

add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;

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' );

require_once('wp_bootstrap_navwalker.php');

Download wp-bootstrap-navwalker class from GitHub. Place the file into theme root folder.

Create a Menu in the Back-End

Login to wordpress admin area -> 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

Open your header.php and copy & paste


<div role="navigation" class="navbar navbar-default">
        

<div class="container-fluid">
          

<div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>


          

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


<!--/.nav-collapse -->
        </div>


<!--/.container-fluid -->
      </div>


 

Findout the below line in header.php

<link rel=”profile” href=”http://gmpg.org/xfn/11″ />

Add after

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

Open footer.php Findout the below line

</body>
</html>

Add Before

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Bootstrap, Wordpress

2 Responses to How to use Bootstrap Navbar in WordPress Theme

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.