Loading...

v5 WordPress Navbar Walker

v5 WordPress Navbar Walker

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

  1. Backup your site and upload theme via theme uploader.
  2. 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.
  3. 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?

3 Comments on “v5 WordPress Navbar Walker”

  • Marco Nite

    says:

    I have a small problem, in my user case I need to be able to add custom classes to the links created by wp_nav_menu .
    To do so, I have a hook filter in functions.php that should be called on nav_menu_link_attributes.
    The problem is that bootstrap_5_wp_nav_menu_walker appears to never call nav_menu_link_attributes, so this does not work. Can this be added ?

    I have another similar filter for nav_menu_css_class (used to add classes to the elements), which works fine (because nav_menu_css_class is actually called in bootstrap_5_wp_nav_menu_walker).

    Thanks

    • Basti

      says:

      Hello Marco,

      the new nav-walker is developed by AlexWebLab, not by me. You should open an issue on Github https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/issues for specific questions to this file. I’m sure he can help you and I will keep nav-walker always up to date.

      However, in next bootScore version the nav-walker included the menu registration will be a complete pluggable function. So, you can register and use previous nav-walker in child (just in case your hook worked with previous one).

      Does that help?

      Basti

      • Nite01

        says:

        Thank you, I opened a ticket there.

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information