07 Jan 2016
Home  »  wordpress   »   How To Integrate Bootstrap Navwalker Menu in WordPress

How To Integrate Bootstrap Navwalker Menu in WordPress

Posted in wordpress By Prabin Parajuli On January 7, 2016

Bootstrap is very easy to use and  it is one of the most popular CSS frameworks which is used in most of the modern websites. It is also an open source and free front-end framework for creating various beautiful websites and web applications. Many Free, as well as Premium Templates, can be downloaded online. There are also other alternatives for bootstrap but I prefer to use bootstrap because of it’s simplicity, lucidity and understandability documentations. It also can be modified easily. Also, developers with few designing knowledge have no problem in using bootstrap.

Some of the prominent features of Bootstrap are:

  1. Bootstrap is Easy to use.
  2. It Provides responsive features.
  3. Browser compatibility.
  4. Mobile-first approach.
  5. Supports glyphicons.
  6. Supports different amazing icons.

When coming to developing websites, many developers and designers get stuck in managing Navigation bar or Navigation menu. The simple, beautiful and responsive menu is what we all want on our sites.

We all know the navbar is one of the prominent features of Bootstrap sites. They begin collapsed (and are toggleable) in while viewing on mobile devices. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

Today we are  going to implement bootstrap Navwalker menu in WordPress site with 3 simple steps.

Bootstrap Navwalker menu in WordPress

Ok, Let’s Start

Bootstrap Navwalker menu in WordPress

STEP 1: Download Bootstrap Nav Walker Class and upload to theme’s folder

Download wp_bootstrap_navwalker.php file from here  Download Bootstrap nav walker.Upload the file inside your Active Theme’s folder.
i.e.  /wp-content/child-themes/class-wp-bootstrap-navwalker.php

I will no go over how exactly the nav walker class works. For now, we just going to download the Nav Walker Class and include in our WordPress file for the implementation of Bootstrap Menu.

STEP  2: Fetch Bootstrap Nav Walker & register Bootstrap styles and scripts.

Open your WordPress themes functions.php file which is located in /wp-content/child-theme/functions.php and add the following code:

//Registering Custom Navigation Walker Menu
require_once('class-wp-bootstrap-navwalker.php');

Make sure you have enqueued bootstrap.css and bootstrap.js files in your functions.php file.

wp_enqueue_style( 'bootstrap_min', get_stylesheet_directory_uri().'/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap_min', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array(), '', true );

Final Step: Link Nav Walker Menu to WordPress

Update your wp_nav_menu(); function in your theme’s header.php file. Inside your header.php file, you’ll see function something like this:

wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) );

Replace above code with the following code:

wp_nav_menu( array(
'menu'       => 'primary',
'depth'      => 2,
'container'  => false,
'menu_class' => 'nav navbar-nav pull-right float-none',
'walker'     => new wp_bootstrap_navwalker())
);

If you haven’t yet declared your menu in functions.php file, add the following in your functions.php file.

register_nav_menus( array(
'primary' => __( 'Primary Menu', 'your-theme-name' ),
) );

Simple as 1,2,3. Isn’t it ? Now, go to your Dashboard—>Apprearance—>Menu and add Nav menu selecting theme location.

Final Thought

I have used the Bootstrap Navbar Walker menu on various sites of my clients. I always follow the above simple steps and this is the most effective solution I guess. You can even integrate bootstrap menu on your
custom theme. In conclusion, Bootstrap Menu have been very helpful in my Theme development workflow. However, if you follow the above steps precisely, I hope this article help you as well. Happy WordPress !!

If you have any query, kindly leave a message below.

Related Posts