Hi, in this post I am going to show you how to create a WordPress bootstrap menu without using any plugin, for that follow the steps,
Step 1. Download the bootstrap nav walker file from GitHub following the link: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/blob/master/wp-bootstrap-navwalker.php
Step 2. First, include the downloaded nav walker file placing into your theme folder
Step 3. Now declare a menu in functions.php for that you can go to our menu creation post.
Step 4. Now get the menu in frontend where you want to show the bootstrap menu for that you can go to our menu creation post
<?php //The Arguments of the menu $args = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'item_spacing' => 'preserve', 'depth' => 0, 'walker' => '', 'theme_location' => 'menu-id-tobe-fetched' ); //to display the menu wp_nav_menu( $args ); ?>
Step 5. Now replace the ‘walker’ => ”, to ‘walker’ => new WP_Bootstrap_Navwalker()
The code will look like
<?php //The Arguments of the menu $args = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'item_spacing' => 'preserve', 'depth' => 0, 'walker' => new WP_Bootstrap_Navwalker(), 'theme_location' => 'menu-id-tobe-fetched' ); //to display the menu wp_nav_menu( $args ); ?>
Now run the code and you have done,
In our next post, we will learn about the footer.php file of WordPress theme