We build easy to manage, secure and Mobile friendly Websites.

How To Add WP Bootstrap Navwalker Class To Custom Your WordPress Theme


A custom WordPress Navwalker to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built-in menu manager. [Author]

  • Download a copy of the zip file from [Git Repo]
  • Unzip zip folder, open the folder copy and paste the file class-wp-bootstrap-navwalker.php in your theme folder
  • Open class-wp-bootstrap-navwalker.php using your text editor, go to line 366, you will see the line of code below
$fallback_output .= '<li class="nav-item"><a href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '" class="nav-link" title="' . esc_attr__( 'Add a menu', 'wp-bootstrap-navwalker' ) . '">' . esc_html__( 'Add a menu', 'wp-bootstrap-navwalker' ) . '</a></li>';

change the two text domain wp-bootstrap-navwalker to your theme text domain and save file.

Open your function.php file located in your theme folder and add the code below

/**
 * 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 you have not previously declared any menu, copy and paste the code below into your function.php.

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

How To Use WP Navwalker in your WordPress Menu

  • Open your header.php file
  • Locate wp_nav_menu() function in the file
  • Add walker item to wp_nav_menu args array as shown below
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 now have a fully functioning Bootstrap by Twitter Drop Down menu integrated into your WordPress Theme

Leave a Reply

Your email address will not be published.