Create Bootstrap Navbar Menu for WordPress Website

0
84

If you are creating a new website you have to include dynamic menus at some point. The elegant way in wordpress to output the code for a menu would be to overwrite the class Walker_Nav_Menu. Depending on the complexity of the Menu this might be a lot of work.

For Bootstrap there is already a free implementation: https://github.com/twittem/wp-bootstrap-navwalker

How to use the Bootstrap NavWalker to output a WordPress menu

First we download the wp_bootstrap_navwalker.php and put it in our solution. I usually put it in a new folder called includes.

Then we open our functions.php and include the Bootstrap Nav Walker.

require_once('includes/wp_bootstrap_navwalker.php');

The next step is to register a new menu position (theme location).

require_once('includes/wp_bootstrap_navwalker.php');

function nddt_register_menu() {
  register_nav_menu('nav_bar',__( 'Nav Bar' ));
}
add_action( 'init', 'nddt_register_menu' )

This will create a checkbox in the wordpress backend which allows us to assign one menu to this position.

Outputting the Bootstrap menu in WordPress frontend

To fill the standart Bootstrap Navbar with our own menu we would do this:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>
        <?php
            wp_nav_menu( array(
                'menu'              => 'nav_bar',
                'theme_location'    => 'nav_bar',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'nddts-website',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>

As you can see we reference the menu position we have created earlier and query the menu that is assigned to it. Feel free to change the container-id to something that suits your website or remove it.

Creating the menu in the WordPress backend

Now we can create our menu in the wordpress backend like we are used to. There are some conventions you can use to create dividers, dropdown-headers or use glyphicons. You can read about them on the github-page of the Boostrap Nav Walker for WordPress.

LEAVE A REPLY

Please enter your comment!
Please enter your name here