This Tutorial will teach you how to integrate Bootstrap 4 menu in your WordPress Theme. You can use it to make your WordPress Menu Responsive i.e. the menu will be collapsed and toggleable in mobile screens, but for tablets and computer screen (big screens) it will remain fully visible.
Check out my other Bootstrap 4 Tutorials for Beginners:
Let start understanding the HTML structure of the Bootstrap menu. The HTML code is like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Brand and toggle button --> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- End --> <!-- Your website Links --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <!-- End --> </nav>
The main problem is that it is a static menu but WordPress menu is dynamic (created from dashboard). So to solve this problem we will be using Nav Walker Class which will automatically convert the WordPress menu structure to that of Bootstrap’s Menu.
To use Nav Walker Class first download wp_bootstrap_navwalker.php from GitHub.
require_once('wp_bootstrap_navwalker.php');
/*Navigation Menus*/ function register_my_menu() { register_nav_menu('header-menu',__( 'Header Menu' )); } add_action( 'init', 'register_my_menu' ); /*End*/
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Brand and toggle button --> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- End --> <!-- Your website Links --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'header-menu', 'depth' => 2, 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'navbar-nav mr-auto', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> <!-- End --> </nav>
Note: I have updated the wp_nav_menu() function by adding fallback_cb & walker item to it.
The menu_class is provided value of navbar-nav mr-autov.
This completes our integration now let us check responsiveness of our menu.
In your WordPress Dashboard create a new menu and assign it’s Theme Locations as Header Menu.
Add a few items to this menu and save it.
Now when you open the website in laptop the menu will be fully visible.
When viewing it in smaller screens of smartphones, it will show up in collapsed and toggleable form.
1. Make sure that you have added bootstrap.css and bootstrap.js files to your theme folder. If yes then follow the next 2 points.
2. Register the bootstrap.css in the “functions.php file by adding the below code –
function theme_scripts() { /*Bootstrap style reference*/ wp_enqueue_style( 'bootstrapCSS', get_template_directory_uri() . '/Bootstrap/bootstrap.css' ); /*End*/ /*Your theme stylesheet reference*/ wp_enqueue_style( 'style.css', get_stylesheet_uri() ); /*End*/ } add_action( 'wp_enqueue_scripts', 'theme_scripts' );
Note: I also registered my theme’s stylesheet called style.css after bootstrap.css. If your theme has more stylesheets then add separate wp_enqueue_style lines for each of them.
3. Lastly, register jQuery and bootstrap.js file on the functions.php file. The code is:
function theme_js () { /*jQuery Reference*/ wp_deregister_script('jquery'); wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1'); wp_enqueue_script('jquery'); /*End*/ /*Bootstrap js reference*/ wp_enqueue_script( 'bootstrapJS', get_template_directory_uri() . '/Bootstrap/bootstrap.js', array(), '1.0.0', true ); /*End*/ } add_action( 'init', 'theme_js' );
Bootstrap is easy to use and most popular HTML, CSS, and JS framework for developing responsive website. I would recommend you to use it as it greatly increases the speed of development.
If you like this article then share it with your friends in facebook, twitter and pinterest.
Share this article -