Convert Static Bootstrap Navigation to Dynamic WordPress Menu

Step 6 of Convert Bootstrap 4 Template to Wordpress Theme

This is the Step 6 of Tutorial How to Convert Bootstrap 4 Templates into WordPress Themes . In this step we will convert our static Bootstrap Navigation into a dynamic WordPress menu.

Let’s Begin

The current Bootstrap navigation in our static template is just below the <body> tag of your index.php file and the HTML code looks something like below.

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Tushar Gugnani</a>
        <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

If you paste this code in your WordPress theme header.php file under <body> tag, the navigation will look perfectly fine.

But since we want the ability to change the menu directly from our WordPress dashboard and to not edit the php files every time we make changes to our menu.

We will convert this menu into dynamic.

# 1 Modify Menu from WordPress Dashboard

Go to your wordpress dashboard.

Click on Appearance > Menus 

You will see a default Menu in this page. Remove “Sample Page” link from this menu. Start adding custom links to this Menu

  1. Link Test : Portfolio , URL : #portfolio
  2. Link Test : About , URL : #about
  3. Link Test : Contact , URL : #contact

Under the Menu Settings, Display Location -> Select Primary.

Click Save Menu

 

# 2 Add bs4navwalker.php

bs4navwalker.php is a script that helps us to correctly define a dynamic menu in wordpress using wp_nav_menu function.

Grab the latest bs4navwaler.php from dupkey/bs4navwalker  . Save the bs4navwalker.php file in your theme root directory.

Open functions.php file in your editor. This file is located at the project root of the theme directory.

Add the following require function, just above the themename_setup() function.

    require_once('bs4navwalker.php');

 

# 3 Add Custom Menu

Next, let’s create a dynamic menu in our theme.

Open header.php file in your editor, and add the following code just below the <body> tag.

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
        <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="#page-top"><?php bloginfo('name'); ?></a>
            <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fa fa-bars"></i>
            </button>
            <?php
            wp_nav_menu([
                'menu'            => 'primary',
                'theme_location'  => 'menu-1',
                'container'       => 'div',
                'container_id'    => 'navbarResponsive',
                'container_class' => 'collapse navbar-collapse',
                'menu_id'         => false,
                'menu_class'      => 'navbar-nav ml-auto',
                'depth'           => 0,
                'fallback_cb'     => 'bs4navwalker::fallback',
                'walker'          => new bs4navwalker()
            ]);
            ?>
        </div>
    </nav>

 

To explain the above code, wp_nav_menu will fetch the contents of menu we created on the wordpress dashboard. For this we need to provide some parameters to wp_nav_menu. Parameters determine which menu contents needs to be fetched,  and how the menu should be formed in HTML once the contents are fetched.

Most of the parameters of wp_nav_menu are self explanatory. If you are looking for more details for a parameter, visit the official documentation of wp_nav_menu

If you visit your website home page now, you should be able to see the menu. But it’s not exactly how is should look like.

For this you need to add classes to <li> and <a> tag of the menu. This cannot be achieved with wp_nav_menu function.

 

# 4 Add Custom Classes to List and Anchor tag of WordPress Menu.

To add custom class to list <li> tag elements of our wordpress menu.

Go to Appearance > Menus >

On the top of the page, you will see a Screen Options button, Click on that and check CSS classes checkbox.

Once this option is checked, you should see a new text box in your menu items, where you can add your custom css class to the list elements.

Add nav-item mx-0 mx-lg-1 class for all your menu items.

 

To add custom class to anchor <a> tag elements of our wordpress menu.

Open your functions.php file , which is located in wordpress theme root directory and add following code at the bottom of the file.

function add_menuclass($ulclass) {
    return preg_replace('/<a/', '<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

Refresh your website’s home page, and you should see your Bootstrap Static Navigation turned into Dynamic WordPress Menu.

Now you can change this menu directly form wordpress dashboard, instead of editing html code.

Great , Let’s move to Step 7 : Remove the unwanted code from Underscores theme

 

tgugnani: Web Stuff Enthusiast.