Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 menus in WordPress via filters. No walker needed!

Bootstrap 4 menus in WordPress with filters

No walker needed!

This snippet allows you to create Bootstrap 4 menus without the use of a Walker. Instead, we're using filters to leverage WordPress core functionality as much as possible. Basically, all you need to do is this and you're done:

<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container">
    <a class="navbar-brand" href="<?php echo home_url(); ?>">
      <?php echo bloginfo('name'); ?> 
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <?php
        wp_nav_menu(array(
          'menu'            => 'foo',
          'container'       => false,
          'menu_id'         => false,
          'menu_class'      => 'navbar-nav',
          'bootstrap'       => true
        ));
      ?>
    </div>
  </div>
</nav>

How to install

  1. Drop the PHP code below into your functions.php file of your theme.
  2. Add 'bootstrap' => true to your wp_nav_menu calls.
<?php
/**
* Bootstrap 4 menus in WordPress via filters. No walker needed!
*
* @author Jake Bellacera <https://github.com/jakebellacera>
*
* Instructions:
* 1. Drop this in your theme's functions.php.
* 2. Add 'bootstrap' => true to your wp_nav_menu args.
*
* Example:
* <?php wp_nav_menu(array('menu' => 'header', 'bootstrap' => true)); ?>
*/
/**
* Add bootstrap classes to individual menu list items
*/
function filter_bootstrap_nav_menu_css_class($classes, $item, $args) {
if (isset($args->bootstrap)) {
$classes[] = 'nav-item';
if (in_array('menu-item-has-children', $classes)) {
$classes[] = 'dropdown';
}
if (in_array('dropdown-header', $classes)) {
unset($classes[array_search('dropdown-header', $classes)]);
}
}
return $classes;
}
add_filter('nav_menu_css_class', 'filter_bootstrap_nav_menu_css_class', 10, 3);
/**
* Add bootstrap attributes to individual link elements.
*/
function filter_bootstrap_nav_menu_link_attributes($atts, $item, $args, $depth) {
if (isset($args->bootstrap)) {
if (!$atts['class']) {
$atts['class'] = '';
}
if ($depth > 0) {
if (in_array('dropdown-header', $item->classes)) {
$atts['class'] = 'dropdown-header';
} else {
$atts['class'] .= 'dropdown-item';
}
if ($item->description) {
$atts['class'] .= ' has-description';
}
} else {
$atts['class'] .= 'nav-link';
if (in_array('menu-item-has-children', $item->classes)) {
$atts['class'] .= ' dropdown-toggle';
$atts['role'] = 'button';
$atts['data-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
}
}
}
return $atts;
}
add_filter('nav_menu_link_attributes', 'filter_bootstrap_nav_menu_link_attributes', 10, 4);
/**
* Add bootstrap classes to dropdown menus.
*/
function filter_bootstrap_nav_menu_submenu_css_class($classes, $args, $depth) {
if (isset($args->bootstrap)) {
$classes[] = 'dropdown-menu';
}
return $classes;
}
add_filter('nav_menu_submenu_css_class', 'filter_bootstrap_nav_menu_submenu_css_class', 10, 3);
@rahulkashyapknl

This comment has been minimized.

Copy link

rahulkashyapknl commented Apr 21, 2020

thanks for it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.