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 restore the Bootstrap nav [walkthrough]
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?


#10

@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


#11

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


#12

“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


#13

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


#14

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 {}
}

#15

+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?


#16

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”


#17

Where and how is this error appearing?


#18

Run composer test from the theme directory with this package included :stuck_out_tongue:


#19

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


#20

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