Last active
January 11, 2020 00:25
-
-
Save lehelmatyus/03c59a4ece7191a63ef2754dbc3ab07b to your computer and use it in GitHub Desktop.
WordPress Menu Walker to generate Uikit Navbar and Nav components from simple 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 | |
class LhL_uikit_walker extends Walker_Nav_Menu { | |
private $menu_type; | |
function __construct($type) { | |
$this->menu_type = $type; | |
} | |
/** | |
* Starts the list before the elements are added. | |
* | |
* Adds classes to the unordered list sub-menus. | |
* | |
* @param string $output Passed by reference. Used to append additional content. | |
* @param int $depth Depth of menu item. Used for padding. | |
* @param array $args An array of arguments. @see wp_nav_menu() | |
*/ | |
function start_lvl( &$output, $depth = 0, $args = array() ) { | |
// Depth-dependent classes. | |
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent | |
$display_depth = ( $depth + 1); // because it counts the first submenu as 0 | |
$classes = array( | |
'sub-menu', | |
($this->menu_type == 'navbar' ? 'uk-nav uk-navbar-dropdown-nav' : 'uk-nav-sub'), | |
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ), | |
( $display_depth >=2 ? 'sub-sub-menu' : '' ), | |
'menu-depth-' . $display_depth | |
); | |
$class_names = implode( ' ', $classes ); | |
$ul_wrapper_div = ""; | |
if($this->menu_type == 'navbar'){ | |
$ul_wrapper_div = $display_depth >=1 ? '<div class="uk-navbar-dropdown">' : ''; | |
} | |
// Build HTML for output. | |
$output .= "\n" . $indent . $ul_wrapper_div . '<ul class="' . $class_names . '">' . "\n"; | |
} | |
/** | |
* Ends the list of after the elements are added. | |
* | |
* @param string $output Used to append additional content (passed by reference). | |
* @param int $depth Depth of menu item. Used for padding. | |
* @param stdClass $args An object of wp_nav_menu() arguments. | |
*/ | |
public function end_lvl( &$output, $depth = 0, $args = null ) { | |
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) { | |
$t = ''; | |
$n = ''; | |
} else { | |
$t = "\t"; | |
$n = "\n"; | |
} | |
$display_depth = ( $depth + 1); | |
$ul_wrapper_div_end = ''; | |
if($this->menu_type == 'navbar'){ | |
$ul_wrapper_div_end = $display_depth >=1 ? '</div>' : ''; | |
} | |
$indent = str_repeat( $t, $depth ); | |
$output .= "$indent" . "</ul>" . "$ul_wrapper_div_end" . "{$n}"; | |
} | |
/** | |
* Start the element output. | |
* | |
* Adds main/sub-classes to the list items and links. | |
* | |
* @param string $output Passed by reference. Used to append additional content. | |
* @param object $item Menu item data object. | |
* @param int $depth Depth of menu item. Used for padding. | |
* @param array $args An array of arguments. @see wp_nav_menu() | |
* @param int $id Current item ID. | |
*/ | |
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { | |
// global $wp_query; | |
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent | |
// Depth-dependent classes. | |
$depth_classes = array( | |
( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ), | |
( $depth >=2 ? 'sub-sub-menu-item' : '' ), | |
( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ), | |
'menu-item-depth-' . $depth | |
); | |
$depth_class_names = esc_attr( implode( ' ', $depth_classes ) ); | |
// var_dump($item); | |
// Passed classes. | |
$classes = empty( $item->classes ) ? array() : (array) $item->classes; | |
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); | |
// for NAV type parent Li-s need uk-parent class | |
if($this->menu_type == 'nav'){ | |
if($args->walker->has_children){ | |
$class_names .= ' uk-parent'; | |
} | |
} | |
// Build HTML. | |
$output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">'; | |
// Link 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 .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"'; | |
switch ($item->title) { | |
case 'Search': | |
$link_title = "<img type='image' alt='Search' src='" . get_template_directory_uri() . "/images/search.png' />"; | |
$attributes .= 'uk-toggle="target: #searchform; animation: uk-animation-fade"'; | |
break; | |
default: | |
$link_title = apply_filters( 'the_title', $item->title, $item->ID ); | |
break; | |
} | |
// Build HTML output and pass through the proper filter. | |
$item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', | |
$args->before, | |
$attributes, | |
$args->link_before, | |
$link_title, | |
$args->link_after, | |
$args->after | |
); | |
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); | |
} | |
} | |
/** | |
* For regular Navigation use the following | |
* https://getuikit.com/docs/navbar | |
*/ | |
/* | |
wp_nav_menu( array( | |
'container' => 'ul', | |
'menu_class' => 'uk-navbar-nav', | |
'theme_location' => 'YOUR_MENU_LOCATION', | |
'depth' => 2, | |
'walker' => new Lhl_uikit_walker("navbar"), | |
) ); | |
*/ | |
/** | |
* For regular Navigation use the following | |
* https://getuikit.com/docs/nav | |
*/ | |
/* | |
wp_nav_menu( array( | |
'container' => '<div>', | |
'menu_class' => 'uk-nav-primary uk-nav-parent-icon ', | |
'items_wrap' => '<ul id="%1$s" class="%2$s" uk-nav>%3$s</ul>', | |
'theme_location' => 'YOUR_MENU_LOCATION', | |
'depth' => 2, | |
'walker' => new Lhl_uikit_walker("nav"), | |
) ); | |
*/ | |
?> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment