bootScore 5.0.2.0 replaces the modified Bootstrap 4 WP Bootstrap Navwalker with a real Bootstrap 5 WordPress Navbar Walker.
bootScore 5.0.2.0 is a major update with changes in header.php and footer.php and no backward compatibility. When updating the parent theme via theme uploader you must change code for nav-walker in both files if you use them in your in child-theme or using the bootCommerce-child.
What is a nav-walker?
A nav-walker is required to create menus in WordPress and display them in the theme. In order to use menus with Bootstrap nav
and navbar
components, WordPress needs a custom bootstrap-nav-walker to handle menus.
Since there was no nav-walker for Bootstrap 5 ready to now, bootScore has used a Bootstrap 4 nav-walker which I modified with some workarounds to get main- and footer-menu work correctly.
AlexWebLab created the first nav-walker for Bootstrap 5 and I implemented in the theme. This nav-walker is incredible tiny and simple. So, less code, better performance, more stable and more options to dropdown alignment.
Update
- Backup your site and upload theme via theme uploader.
- If you are using the bootCommerce child or using a copy of header.php and/or footer.php in your child, you must replace the snippets below in both files.
- Go in Backend to Appearance > Menus and reassign your menus to main-menu and footer-menu.
header.php
Find:
<!-- Wp Bootstrap Nav Walker -->
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'ms-auto',
'container_id' => 'bootscore-navbar',
'menu_class' => 'nav navbar-nav justify-content-end',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
Replace:
<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="bootscore-navbar" class="navbar-nav ms-auto %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
<!-- Bootstrap 5 Nav Walker Main Menu End -->
footer.php
Find:
<!-- Footer Menu -->
<?php
wp_nav_menu( array(
'theme_location' => 'secondary',
'depth' => 1,
'container' => 'div',
'container_class' => 'bs-footer-menu',
'container_id' => 'footer-menu',
'menu_class' => 'nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
<!-- Footer Menu -->
Replace:
<!-- Bootstrap 5 Nav Walker Footer Menu -->
<?php
wp_nav_menu(array(
'theme_location' => 'footer-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="footer-menu" class="nav %2$s">%3$s</ul>',
'depth' => 1,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
<!-- Bootstrap 5 Nav Walker Footer Menu End -->
What else?
- Did you see already the new kitchen sink with all Bootstrap components?
- New translation: Swedish, thnx to Emil Lindén