Skip to content

Instantly share code, notes, and snippets.

@emre-edu-tech
Last active September 24, 2020 09:52
Show Gist options
  • Save emre-edu-tech/5b0f93d22818fb77dbfe3f7666d7878d to your computer and use it in GitHub Desktop.
Save emre-edu-tech/5b0f93d22818fb77dbfe3f7666d7878d to your computer and use it in GitHub Desktop.
This is a Custom Wordpress Nav Walker implementation for a custom Bootstrap Menu.
<?php
// So-called menu is below and we will implement this custom menu by extending Walker_Nav_Menu class
/*
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li class="drop-down"><a href="">About</a>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li class="drop-down"><a href="#">Deep Drop Down</a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
*/
// You should call this class below by using wp_nav_menu() function with as an array argument with the key 'walker'
class Custom_Menu_Walker extends Walker_Nav_Menu {
// We do not care the container element of ul
// <ul> // Menu without sub menu
function start_lvl(&$output, $depth=0, $args=array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
// <li class="drop-down"><a href="">
function start_el(&$output, $item, $depth=0, $args=array(), $id=0) {
$indent = ($depth) ? str_repeat("\t", $depth) : '';
// li tag
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
$classes[] = ($args->walker->has_children) ? 'drop-down' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
$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 = ($id) ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . '>';
// a tag
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$a_output = $args->before;
$a_output .= '<a' . $attributes . '>';
$a_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$a_output .= '</a>';
$a_output .= $args->after;
// append <a></a> tag to the <li> tag
$output .= apply_filters('walker_nav_menu_start_el', $a_output, $item, $depth, $args);
}
// </a></li>
// function end_el() {}
// </ul>
//function end_lvl(&$output, $depth=0, $args=null) { }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment