LayUI is a front-end framework developed by "Xianxin". It is easy to use and similar to the well-known Bootstrap framework. Currently, most of the open source projects by Xiaoz are developed using the LayUI framework. However, there are relatively few developers using LayUI to develop WordPress themes, so there are some pitfalls. For example, WordPress uses the wp_nav_menu() function to output the menu structure, which is inconsistent with the menu structure of LayUI, resulting in very messy styles. Here is a solution:

Rewrite 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 );
    }
}

Front-end call

Use the following code to call the menu and generate the LayUI style:

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

The theme_location parameter is empty, which means it calls the first main menu by default. However, if the menu you registered is not the main menu, the navigation bar may not be displayed, so 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', // Apply layui-nav style
    'walker' => new new_walker(), // Use the refactored code
    ));
?>

Where header-menu is the alias of your registered menu.

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