0

Add Bootstrap 4 Navwalker to Roots Sage 9

By 19th February 2019Blog

I had some trouble getting the Bootstrap 4 Navwalker into a new Sage Roots 9x theme. I tried the instructions seen on the navwalker page but kept getting errors and whitescreens. Eventually, here’s what I did to get it working:


1. Download the Bootstrap 4 Navwalker file and add it to the theme:

https://github.com/MWDelaney/sage-bootstrap4-navwalker

Be sure to add this inside the /app folder.


2. Include the file into Sage’s required files:

Inside /yourtheme/functions.php file (around lines 50-61), add ‘bootstrap4-navwalker’ into the list of files to load:

/**
 * Sage required files
 *
 * The mapped array determines the code library included in your theme.
 * Add or remove files to the array as needed. Supports child theme overrides.
 */
array_map(function ($file) use ($sage_error) {
    $file = "../app/{$file}.php";
    if (!locate_template($file, true, true)) {
        $sage_error(sprintf(__('Error locating %s for inclusion.', 'sage'), $file), 'File not found');
    }
}, ['helpers', 'setup', 'filters', 'admin', 'bootstrap4-navwalker']);

3. Include the navwalker into the menu: (in header.blade.php file)

@if (has_nav_menu('primary_navigation'))
    {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'container'=> false, 'menu_class' => 'nav nav-justified', 'walker' => new \App\wp_bootstrap4_navwalker()]) !!}
@endif

And that’s it. You will need to ensure this walker is added to any menu where you want the Bootstrap 4 walker to override.

Phil

Phil

I'm a Wordpress web developer and website designer based in Cheshire, UK. I specialise in Wordpress, Responsive design and website conversion. | Twitter | Linkedin

Leave a Reply