Tag: Custom Theme

Why Add Bootstrap Navwalker?

The main reason for adding this addition to your WordPress Theme is best said by its author [Git Link]

“A custom WordPress Nav Walker Class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.”

By implementing this code, you will be changing how the menus are generated by WordPress. This will allow the incorporation of Bootstrap 4 styling and standards found on a pure Bootstrap built website. This addition should be pair with an installation of Bootstrap by Twitter [Link] and a consideration for using a Bootstrap focused design.

Please check out “ADDING BOOTSTRAP TO AN UNDERSCORES THEME”  for a detailed guide demonstrating how to add and create a brand new underscores theme with a bootstrap integration.

Downloading the Navwalker Files

Lets head over to the main Git Repo for WP Bootstrap Navwalker [Link]. Go ahead and download a copy of repository and open the downloaded Zip file.

Open the downloaded Zip and select the file called:

class-wp-bootstrap-navwalker.php

Place this file in your active theme folder, or the theme folder you plan to use. File Path should look like so:

Main website folder (folder) -> wp-content (folder) -> themes (folder) -> theme folder (folder) -> add class-wp-bootstrap-navwalker.php

Integration of WP Navwalker

Now that your file has been added to your theme we can start hooking up the Navwalker to your Menus, First lets head over to the functions.php file located in the theme folder – and add the following code:

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // File does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // File exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

If no menu has been previously declared, please declare a new menu in your functions.php file.

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Using WP Navwalker in your menu

Lets take a second to look at what we have completed. First, we added the files needed to use WP Navwalker with our theme, added the code necessary to connect the new WP Navwalker file to our WordPress Theme, and for our last step we will create a Menu (most likely located in the header.php file) that will use WP Navwalker!

To update any Wordpress Menu in your theme with the newly added Navwalker use the new wp_nav_menu argument by adding a ‘walker’ item to the wp_nav_menu args array.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

You menu will now implement the same drop down features found in the Bootstrap by Twitter examples!

Typically additional markup is added to these menus, here is an example of a fixed-top menu that collapse for responsive navigation at the md breakpoint. Additional menu options can also be found in the Bootstrap documentation as well [Link]

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            '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>

To change your menu style add Bootstrap nav class names to the menu_class declaration.

Review options in the Bootstrap docs for more information on nav classes.

You should now have a fully functioning Bootstrap by Twitter Drop down menu integrating into you WordPress theme!