Webberhub.com Logo
webberhub.com Intro

Integrate Bootstrap Navbar into WordPress Theme with WH Nav Walker


Integrate Bootstrap Navbar into WordPress Theme with WH Nav Walker

This tutorial guide you to the way of design WH Nav Walker class for making your own WordPress theme navigation bar using Bootstrap. This navigation menu support more than 3 steps of DropDown menus.



Did you already try to make you own WordPress theme using Bootstrap but you cant make Bootstrap navigation bar correctly?

Then, This guide for you. In this guide, we are going to make your own Bootstrap navigation bar for your WordPress theme.

WH Nav Walker Class

When using bootstrap to develop your own WordPress theme, There are many difficulty arise when designing navigation bar. The reason for that is, We cant directly include bootstrap all classes into your WordPress navigation bar.

But, If you need to integrate bootstrap navigation bar to your theme you have to make your own class for that navigation bar also by extending default "Walker_Nav_Menu" class of WordPress.

So, This guide show you same easiest way for way to develop your own bootstrap navigation bar into your WordPress theme.

Here, We made "WH Nav Walker" class for you. This is an open source program and Designed by me (Nirosh Webber). By using this class you can create your own WordPress navigation using bootstrap 4.x any versions.

Lat's see the way of integrate "WH Nav Walker" class into your WordPress theme and make beautiful and fully functional navigation bar with more than 3+ steps DropDown using bootstrap.

First you need to download "WH Nav Walker" class using WebberHub on Github.

WH Nav Walker Download Link

Then, You need to add theme support for Manu in functions.php file in your WordPress Theme. The example code as follows.

add wordpress theme support for menubar

Now you can copy "WH Nav Walker" class include PHP file into your WordPress theme directory. and Include these PHP file into functions.php file. The example code as follows.

add nav walker class to function php

After correctly including above two things in functions.php file. You can set bootstrap navbar into your WordPress theme.

Here, I gm going to set my navigation menu in header.php file. The reson for that is I need to show my navigation bar in every page of my websites.

Following is the code for add bootstrap navigation bar into your WordPress theme.

add wh navbar into header php fiel

Now you can see fully functional navigation bar powerd by bootstrap in your wp theme. So, This navigation bar supports upto steps 3+ DropDown menu.

Conclusion

This guide show you the way of making your own navigation bar for your WorPress theme using bootstrap 4.x any versions.

Following video you can see how is the looking after completely developed this navigation bar.

Navbar with WH Nav Walker [Video]

Here, I included same styling and jquery scripts for make it beautiful and functional smoothly. Then the navigation bar can see and work professional manner.

If you need to learn how to add these styling and scrpt we made a guide for that also. 


Related Posts..