The last word on Sage 9 Bootstrap 4 Navwalkers

bootstrap4
sage9
navwalker

#1

Since the question of how to add a Bootstrap 4, Sage-friendly navwalker comes up a lot in this forum, I made a Sage composer dependency to solve the problem. Now, all you need to do is include this composer package in your Sage theme and the navwalker will be available to use.

Check it out:

From the README:

Sets up a Bootstrap 4 Navwalker for Sage 9-based themes.

To install, run the following in your Sage9-based theme directory:

composer require "mwdelaney/sage-bootstrap4-navwalker"

Include the navwalker in your wp_nav_menu function:

wp_nav_menu( array(
   'menu' => 'primary', 
   'theme_location' => 'primary',
    ... 
   'walker' => new wp_bootstrap4_navwalker())
);

WP_Bootstrap_Navwalker for bootstrap 4
How to add new comments walker to Sage
#2

Dude, thank you so much for this.
Having to manage/upgrade the old one was becoming a real pain.

Edit: Actually, I have run into an issue.
After running composer require, when I attempt to use new wp_bootstrap4_navwalker()) as a walker, it gives me an error saying Class ‘wp_bootstrap4_navwalker’ not found.

Any idea what’s going on?


#3

Sounds like you’re probably not in the right namespace. It looks like wp_bootstrap4_navwalker is in the App namespace, so does the file you’re calling it from have namespace App up at the top? Can you show/tell us some more context about where you’re instantiating the wp_bootstrap4_navwalker class?


#4

Bah, the lack of a namespace in my header.blade.php was it, thank you.


#5

I am getting the same error - sorry, can you elaborate on what you mean by adding the app name space?

Using the code given from the sage 9 docs

@if (has_nav_menu(‘primary_navigation’))
{!! wp_nav_menu([‘theme_location’ => ‘primary_navigation’, ‘menu_class’ => ‘nav’, ‘walker’ => new wp_bootstrap4_navwalker())]) !!}
@endif


#6

I actually just updated the README with more details on this. Here’s an excerpt:

Include the navwalker in your wp_nav_menu function:

As a Controller method (Recommended)

In your Controller, probably app.php

/**
 * Primary Nav Menu arguments
 * @return array
 */
public function primarymenu() {
  $args = array(
    'theme_location'    => 'primary_navigation',
    ...
    'walker'            => new wp_bootstrap4_navwalker()
  );
  return $args;
}

In your Blade file, probably header.blade.php

@if (has_nav_menu('primary_navigation'))
  {!! wp_nav_menu($primarymenu) !!}
@endif

Without Controller

If you’re not setting up your template data with Controller, you’ll need to fully reference the \App\wp_bootstrap4_navwalker().
In your Blade file, probably header.blade.php

@if (has_nav_menu('primary_navigation'))
  {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new \App\wp_bootstrap4_navwalker()]) !!}
@endif

#7

That is a nice work, but it seems to be limited ton only 2 level for submenu. More than 2 level will not work without adding ‘depth’ => 2


#8

Bootstrap doesn’t support more than 1 submenu, out of the box.


#9

Running composer test results in this error:

Fatal error: Class 'Walker_Nav_Menu' not found in ..\vendor\mwdelaney\sage-bootstrap4-navwalker\bootstrap4-navwalker.php on line 20
Script phpcs handling the test event returned with error code 255

Obviously the class exists within WordPress, but Composer doesn’t know about it. How can this error be fixed?