Wp Bootstrap Navwalker screenshot

Wp Bootstrap Navwalker

Author Avatar Theme by Wp bootstrap
Updated: 7 Nov 2021
3369 Stars

A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.

Overview:

The WP Bootstrap Navwalker is a custom WordPress Nav Walker Class that allows users to implement the Bootstrap 4 navigation style in a custom WordPress theme using the built-in menu manager. It provides the correct syntax and CSS classes to utilize Bootstrap dropdown navigation.

Features:

  • Fully compliant with all Theme Review guidelines for wordpress.org theme submission
  • Does not require any modifications to be compliant
  • Allows for the replacement of the text domain for theme compatibility
  • Supports Bootstrap 4 and has separate branch for Bootstrap 3 compatibility
  • Handles icon and link modifiers through CSS classes instead of the Title input

Installation:

To install the WP Bootstrap Navwalker, follow these steps:

  1. Place the class-wp-bootstrap-navwalker.php file in your WordPress theme folder /wp-content/themes/your-theme/
  2. Open your WordPress theme’s functions.php file /wp-content/themes/your-theme/functions.php and add the following code:
// Register Navwalker class alias
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

// Add theme support for the nav walker
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'your-theme-text-domain' ),
) );
  1. If you encounter any errors with the above code, use a check like this to return clean errors for diagnosis:
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
	die( 'The Bootstrap Navwalker class file is missing.' );
}
  1. If a menu doesn’t already exist, declare a new menu in your functions.php file:
function your_theme_setup() {
    register_nav_menu( 'primary', 'Primary Menu' );
}
add_action( 'after_setup_theme', 'your_theme_setup' );
  1. Add or update any wp_nav_menu() functions in your theme to use the new walker by adding a 'walker' item to the wp_nav_menu args array:
wp_nav_menu( array(
    'menu_class'      => 'navbar-nav',
    'theme_location'  => 'primary',
    'depth'           => 2,
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'navbarNav',
    'walker'          => new wp_bootstrap_navwalker(),
) );

Summary:

The WP Bootstrap Navwalker is a useful utility class for formatting WordPress theme menus with the correct syntax and CSS classes to implement Bootstrap dropdown navigation. It is compliant with Theme Review guidelines for wordpress.org theme submission and supports both Bootstrap 3 and Bootstrap 4. The installation process is well-documented, making it easy for developers to implement this custom Nav Walker in their WordPress themes.