How to develop a WordPress responsive bootstrap 3 menu

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

Thanks for reading

Share The Post On -

Add a Comment

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.