Bootstrap Navwalker In WordPress

Implementing Bootstrap Navwalker in WordPress

If your HTML template using Bootstrap Navwalker and you need to convert this in the WordPress then you should have to Bootstrap Navwalker. This is a utility class that is intended to format your WordPress theme menu with the correct syntax and CSS classes to utilize the Bootstrap dropdown navigation. Now we learn how to add this in the WordPress theme.

Step: 1
At first, you should have to download WP Bootstrap Navwalker from this link. There you can find class-wp-bootstrap-navwalker.php file.

Step: 2
Then class-wp-bootstrap-navwalker.php file add in your theme directory folder.

Step : 3
After that open your functions.php and require the navwalker file like below code.

// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

If you found any error than you use this code.

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';
}

Step: 4
After that, you need to register in the functions.php if menu already not exist.

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

Step: 5
After that, you will add the wp_nav_menu() in the destination place like below code.

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(),
) );

Also, you can modify your menu class, id container type, container class and container id, etc. For more info about wp_nav_menu() please visit WordPress site.

4 Comments:

  1. Hi, and thanks fore super duper nice explanation on this matter. I got though one issue and that was that the toggle men u didnt work in the mobile size. After struggeling with this for quite a time i began to solve things out what made this appare. My conclution is that if i skip the “collapse” class in the container_class this will take away this issue.

Leave a Reply

Your email address will not be published. Required fields are marked *