Skip to content

Instantly share code, notes, and snippets.

@SimonPadbury
Last active April 1, 2018 10:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SimonPadbury/e6014659d68cff894814 to your computer and use it in GitHub Desktop.
Save SimonPadbury/e6014659d68cff894814 to your computer and use it in GitHub Desktop.
<?php
/*
Bootstrap 4.0.0-alpha2 nav walker extension class
=================================================
Add this to your `functions.php`
*/
class bootstrap_4_walker_nav_menu extends Walker_Nav_menu {
function start_lvl( &$output, $depth ){ // ul
$indent = str_repeat("\t",$depth); // indents the outputted HTML
$submenu = ($depth > 0) ? ' sub-menu' : '';
$output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ){ // li a span
$indent = ( $depth ) ? str_repeat("\t",$depth) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ($args->walker->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_anchestor) ? 'active' : '';
$classes[] = 'nav-item';
$classes[] = 'nav-item-' . $item->ID;
if( $depth && $args->walker->has_children ){
$classes[] = 'dropdown-menu';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr($class_names) . '"';
$id = apply_filters('nav_menu_item_id', 'menu-item-'.$item->ID, $item, $args);
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr($item->url) . '"' : '';
$attributes .= ( $args->walker->has_children ) ? ' class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="nav-link"';
$item_output = $args->before;
$item_output .= ( $depth > 0 ) ? '<a class="dropdown-item"' . $attributes . '>' : '<a' . $attributes . '>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters ( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
/*
Register Navbar
*/
register_nav_menu('navbar', __('Navbar', 'your-theme'));
/*
Bootstrap 4.0.0-alpha2 navbar with dropdown menus
=================================================
A small CSS modification is required. Add this to your theme CSS.
*/
.navbar .dropdown-menu li {
width: 100%;
margin-left: 0 !important;
}
<!--
Bootstrap 4.0.0-alpha2 navbar with dropdown menus
=================================================
Add this to your `header.php`
-->
<nav class="navbar navbar-topbar navbar-dark bg-primary">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="collapsingNavbar">
<a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a>
<?php
wp_nav_menu( array(
'theme_location' => 'navbar',
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_4_walker_nav_menu()
) );
?>
<?php get_template_part('navbar-search'); ?>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment