The last word on Sage 9 Bootstrap 4 Navwalkers

MWDelaney · December 13, 2017, 2:33am

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

pi_mont · December 18, 2017, 5:58pm

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?

alwaysblank · December 18, 2017, 6:43pm

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?

pi_mont · December 18, 2017, 7:00pm

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

bonlando · February 16, 2018, 6:55pm

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

MWDelaney · February 16, 2018, 7:05pm

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

patrice · April 12, 2018, 8:18am

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

Doocey · April 12, 2018, 3:27pm

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

peiche · April 18, 2018, 3:19pm

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?

Davide_Prevosto · April 25, 2018, 2:26pm

@peiche You need to run composer require "mwdelaney/sage-bootstrap4-navwalker" onto your “sage based” theme folder.

`eg. ./web/app/themes/my-theme``

It works for me

peiche · April 25, 2018, 3:39pm

It still doesn’t work. You can run “composer test” without errors?

Davide_Prevosto · April 25, 2018, 4:04pm

“composer test” returns your error.
PHP Fatal error: Class 'Walker_Nav_Menu' not found in /srv/www/blog.xxx.test/current/web/app/themes/xxx/vendor/mwdelaney/sage-bootstrap4-navwalker/bootstrap4-navwalker.php on line 20

peiche · April 25, 2018, 4:30pm

Yes, that’s what I’d like to resolve.

alwaysblank · April 25, 2018, 4:40pm

It’s complaining because composer is running its tests with phpcs which is not able to load WordPress and therefor has no access to Walker_Nav_Menu. I don’t know what tests you’re running, but if those tests aren’t actually evaluating the output of the Bootstrap 4 nav walker, you might be able to prevent the error by just shiming in an empty object called Walker_Nav_Menu, i.e.

if (!class_exists('Walker_Nav_Menu')) {
    class \Walker_Nav_Menu {}
}

Simeon · May 14, 2018, 4:53am

+1 on this same error here, phpcs has drama with the class. Couldn’t work out where to put the above code to remove the error?

manus · May 21, 2018, 1:25pm

Another one with the same error: “Fatal error: Class ‘Walker_Nav_Menu’ not found in …roots/vendor/mwdelaney/sage-bootstrap4-navwalker/bootstrap4-navwalker.php on line 20”

MWDelaney · May 21, 2018, 3:55pm

Where and how is this error appearing?

ben · May 22, 2018, 12:50am

Run composer test from the theme directory with this package included

manus · May 22, 2018, 12:31pm

This is the result after running “composer test” from the theme directory:

phpcs
PHP Fatal error: Class ‘Walker_Nav_Menu’ not found in /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/mwdelaney/sage-bootstrap4-navwalker/bootstrap4-navwalker.php on line 20
PHP Stack trace:
PHP 1. {main}() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/scripts/phpcs:0
PHP 2. include_once() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/scripts/phpcs:19
PHP 3. include_once() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/CodeSniffer/CLI.php:27
PHP 4. ComposerAutoloaderInit726026fe7d12aebd0d28444fd12d5cd0::getLoader() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/autoload.php:7
PHP 5. composerRequire726026fe7d12aebd0d28444fd12d5cd0() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/composer/autoload_real.php:56
PHP 6. require() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/composer/autoload_real.php:66

Fatal error: Class ‘Walker_Nav_Menu’ not found in /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/mwdelaney/sage-bootstrap4-navwalker/bootstrap4-navwalker.php on line 20

Call Stack:
0.0004 393048 1. {main}() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/scripts/phpcs:0
0.0062 583312 2. include_once(‘/Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/CodeSniffer/CLI.php’) /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/scripts/phpcs:19
0.0373 585056 3. include_once(‘/Applications/AMPPS/www/roots/web/app/themes/astro/vendor/autoload.php’) /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/squizlabs/php_codesniffer/CodeSniffer/CLI.php:27
0.0385 599888 4. ComposerAutoloaderInit726026fe7d12aebd0d28444fd12d5cd0::getLoader() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/autoload.php:7
0.1487 901600 5. composerRequire726026fe7d12aebd0d28444fd12d5cd0() /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/composer/autoload_real.php:56
0.1868 936768 6. require(‘/Applications/AMPPS/www/roots/web/app/themes/astro/vendor/mwdelaney/sage-bootstrap4-navwalker/bootstrap4-navwalker.php’) /Applications/AMPPS/www/roots/web/app/themes/astro/vendor/composer/autoload_real.php:66

Script phpcs handling the test event returned with error code 255

qbattersby · May 22, 2018, 1:17pm

Just wanted to hop on here to say thanks for this. This makes adding the walker heaven.