Hello and welcome to the next lesson of our WordPress development. In this lesson, we will learn how to create WordPress custom menu using Bootstrap navigation bar.

 

What You Need to Create WordPress Custom Menu

To create custom WordPress menu you must have an HTML designed menu. For that, I am using Bootstrap navigation bar here. You might be knowing Bootstrap is one of the best front-end frameworks to create a responsive website.

You can get Bootstrap Navigation bar code from www.w3schools.com

or,

We are also providing a pre-build free HTML template so that you could focus on WordPress theme development more. Download the template and take your learning to the next level.

 

Let’s get started…

 

Process of Creating WordPress Custom Menu

 

1). Create Pages With the Menu Name

To create a page, go to WordPress dashboard->Pages->Add New, and create a number of pages that you want. This is very easy. You just have to enter the title and hit publish button. See below images for reference.

wordpress page

 

create wordpress images

 

2) Register Menu

In order to create WordPress custom menu first, we have to register navigation menu within WordPress Dashboard. To do so, write below code in functions.php.


function webtoblog_register_nav_menu(){

  register_nav_menu('header', 'Header Navigation Menu' );

}

add_action('initialize', 'webtoblog_register_nav_menu' );

In above code, we have named a function webtoblog_register_nav_menu. You can rename it as per your choice. Within curly braces, we have written a function register_nav_menu and passing two parameters. The first parameter header specify your menu location. We call back this parameter in front-end to display this menu. It should be unique. You are free to rename it as per your project requirement. The second parameter is a kind of description of the menu. This is not necessary. But you should pass this parameter. Because this description will help your theme users to understand the purpose of this menu.

 

Next, we call the above function by using add_action. Which display menu option in Appearance of the dashboard. See bellow images to make it more clear.

wordpress menu location

 

Now, go to Appearance->Menu of the dashboard. You will see Header Menu as theme location. you will also see all the pages which we have created at the beginning of this lesson. You can edit this menu as per your requirement.

custom wordpress menu

 

You can also add more than one custom menu location by using below code.


function webtoblog_register_nav_menu() {

  register_nav_menu(

    array(

      'primary' => __( 'Header Menu' ),

      'footer' => __( 'Footer Menu' )

       ));
  }

  add_action( 'initialize', 'webtoblog_register_nav_menu' );

 

3) Display WordPress Custom Menu

Now, we have to display the menu. For that, we will tell the theme, where we want to display WordPress custom menu. header.php is the most common place to display the menu. Go to header.php and add below code.


<?php wp_nav_menu( array( 'theme_location' => ‘header',));?>

Above code will display menu in your theme without any styling. If you want to display responsive, well-designed menu and you are following our free webtoblog template then you can easily get a well-designed menu. You will find menu code in the header section of the template. You have to follow below code to get WordPress custom menu.





<section class="nav-top big-nav-wrap">
  



<div class="container">




<div class="row">




<div class="col-xs-12 col-sm-12 col-md-12 nav-pad">




<nav class="navbar navbar-inverse">
   



<div class="navbar-header">

             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
             <span class="icon-bar">

             <span class="icon-bar">

             <span class="icon-bar">

            </button>

         </div>



       


<div class="collapse navbar-collapse" id="myNavbar">

            <?php wp_nav_menu( array( 'theme_location' => 'header',

              'container' => false,

              'menu_class' => 'nav navbar-nav',

               ));

            ?>

         </div>




      </nav>




    </div>




  </div>




</div>




</section>




Well, it was the process of creating Custom WordPress Menu. Now we will learn how to create WordPress menu using Bootstrap Navigation bar.

 

How to Create WordPress Menu Using Bootstrap Navigation Bar With wp-bootstrap-navwalker class

First, We need to download wp-bootstrap-navwalker. To download, Click here and do git clone. After downloading unzip the folder and copy wp-bootstrap-nacwalker.php and place it in your theme folder. You will find it inside the cloned folder.

 

Now, open functions.php and and put the following code there.


require_once('wp-bootstrap-navwalker.php');

 

Now go to header.php and update wp_nav_menu()function.  To do so, we will add Walker items in wp_nav_menu() array.


<?php wp_nav_menu( array( 'menu' => 'primary',

          'theme_location'    => 'primary',

          'depth'             => 2,

          'container'         => 'div',

          'container_class'   => 'collapse navbar-collapse',

          'container_id'      => 'bs-example-navbar-collapse-1',

          'menu_class'        => 'nav navbar-nav',

          'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',

          'walker'            => new WP_Bootstrap_Navwalker())

      );

?>

 

Now, we will add above code with Bootstrap Navigation bar HTML code.







<section class="nav-top big-nav-wrap">
  



<div class="container">




<div class="row">




<div class="col-xs-12 col-sm-12 col-md-12 nav-pad">
 




<nav class="navbar navbar-inverse"> 




<div class="navbar-header">

             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
             <span class="icon-bar">

             <span class="icon-bar">

             <span class="icon-bar">

            </button>

         </div>







<div class="collapse navbar-collapse" id="myNavbar">

        <?php wp_nav_menu( array( 'menu' => 'primary',

            'theme_location'    => 'primary',

            'depth'             => 2,

            'container'         => 'div',

            'container_class'   => 'collapse navbar-collapse',

            'container_id'      => 'bs-example-navbar-collapse-1',

            'menu_class'        => 'nav navbar-nav',

            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',

            'walker'            => new WP_Bootstrap_Navwalker())

        );

       ?>

         </div>




      </nav>




    </div>




  </div>




</div>




</section>




 

Now your responsive and well-designed custom WordPress menu using Bootstrap Navigation Bar is ready to use. Hope this lesson will help you to create a custom WordPress menu. If you haven’t downloaded our free template, click here to download. If you like this post, please join us on Twitter and Facebook.