How to Output LayUI-Style Menus in WordPress

LayUI is a frontend framework developed by "Xian Xin". It is simple and convenient to use, similar to the well-known Bootstrap framework. Currently, most of xiaoz's open-source projects use the LayUI framework. However, few developers use LayUI to develop WordPress themes, which leads to some issues. For example, WordPress uses the wp_nav_menu() function by default to output menu structures, which is inconsistent with LayUI's menu structure, causing style chaos. This article records the solution.

Rewrite the wp_nav_menu() Function

Add the following code to the functions.php file in your theme directory:

#-----------------------------------------------------------------#
# Modify the li tag of wp_nav_menu
#-----------------------------------------------------------------#
class new_walker extends Walker_Nav_Menu{
	// Modify the style of the first-level ul tag
	function start_lvl( &$output, $depth = 0, $args = array() ){
		if( $depth == 0 ){
			$output .= '<ul class="layui-nav-child">';
		}else{
			$output .= '<ul class="layui-nav-child">';
		}
	}
	function end_lvl( &$output, $depth = 0, $args = array() ){
		if( $depth == 0 ){
			$output .= "</ul>";
		}else{
			$output .= '</ul>';
		}
	}
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
		$t = '';
		$n = '';
		} else {
		$t = "\t";
		$n = "\n";
		}
		$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

		$classes   = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
		if( $depth == 0 ){
			$class_names .= ' layui-nav-item'; // Add Layui style
		}
		if ( in_array( 'current-menu-item', $classes ) ){
			$class_names .= ' layui-this'; // Add current style
		}
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $class_names . '>';

		$atts           = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target ) ? $item->target : '';
		if ( '_blank' === $item->target && empty( $item->xfn ) ) {
		$atts['rel'] = 'noopener noreferrer';
		} else {
		$atts['rel'] = $item->xfn;
		}
		$atts['href']         = ! empty( $item->url ) ? $item->url : '';
		$atts['aria-current'] = $item->current ? 'page' : '';

		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
		if ( ! empty( $value ) ) {
			$value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
			$attributes .= ' ' . $attr . '="' . $value . '"';
		}
		}

		$title = apply_filters( 'the_title', $item->title, $item->ID );

		$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

		$item_output  = $args->before;
		$item_output .= '<a' . $attributes . '>';
		$item_output .= $args->link_before . $title . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Frontend Call

Use the code below to call the menu and generate LayUI-style output:

<?php
  wp_nav_menu( array( 
    'theme_location' => '', // Navigation alias
    'menu_class' => 'layui-nav', // Reference layui-nav style
    'walker' => new new_walker(), // Reference the refactored walker
  ));
?>

The theme_location parameter above is empty, which means it calls the first main menu by default. However, if the registered menu is not the main menu, the navigation bar may not display. In that case, you need to modify it to the alias of your registered menu. For example:

<?php
	wp_nav_menu( array( 
		'theme_location' => 'header-menu', // Navigation alias
		'menu_class' => 'layui-nav', // Reference layui-nav style
		'walker' => new new_walker(), // Reference the refactored walker
	));
?>

Here, header-menu is the alias of your registered menu.

Some content in this article is referenced from: WordPress Output LayUI Menu Structure