Last active
September 24, 2020 09:52
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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