Customize WordPress menu structure with Walker_Nav_Menu

Line number 82 we have the variable $indent is to set spaces with the character t let it show the tag <li> for indentation (see line 115).

$indent = ( $depth ) ? str_repeat( "t", $depth ) : ”;

Lines 84 and 85 mean that it will get the ID of the object in the menu through the data object $item->ID and append to object $item->classes to display symbolic HTML classes for each object in the menu (e.g. class menu-item-83), the classes after being concatenated will be put into the variable $classes.

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

Next on lines 98 and 99, after the variable $classes above, in these two lines it will proceed to extract the values ​​in the array $classes to display out the menu element separated by a space. In this paragraph, you will see the line apply_filters with hook named nav_menu_css_classlater you need to do anything related to editing the class in the menu, just use add_filter to filter through this hook.

$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ‘ class="’ . esc_attr( $class_names ) . ‘"’ : ”;

Lines 112 and 113 are similar to 98 and 99 but it is responsible for setting the ID of each element in the menu.

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

Line 115 is the setting of what it should display to the outside. Here you can easily understand that it prints a card <li> with ID and Class in two variables $class_names and $id above.

$output .= $indent . ‘<li’ . $id . $class_names .’>’;

Lines 117 to 121 means that it will put some properties of each list element in the menu into the $atts array so that it will use foreach again later for the purpose of separating the values ​​to display with the tag. a.

$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 : ”;

I give an example for those of you who don’t understand, for example this paragraph:

$atts[‘title’]  = ! empty( $item->attr_title ) ? $item->attr_title : ”;

That is, if $item->attr_title has a value (negation of empty) then it will call $item->attr_title output (this object will return the contents of the menu’s Title property). Otherwise, do nothing (represented by two characters ' ').

Paragraph 151 to 156 is that it will show the structure of the element inside <li> out, these elements are contained in the variable $item_output.

$item_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘</a>’;
$item_output .= $args->after;

Practice: Display the Description of the menu object.

If we want to display the Description of the object in the menu to the outside, then we will first declare one more line with the $item_output variable, I will check if there is a description, then it will display.

$item_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘</a>’;
$item_output .= !empty( $atts[‘description’] ) ? ‘<span class="description">’ . esc_attr( $atts[‘description’] ) . ‘</span>’ : ”;
$item_output .= $args->after;

Result:

public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
{
$indent = ( $depth ) ? str_repeat( "t", $depth ) : ”;
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ‘menu-item-‘ . $item->ID;
		$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item, $args, $depth ) );
$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     : ”;
$atts[‘rel’]    = ! empty( $item->xfn )        ? $item->xfn        : ”;
$atts[‘href’]   = ! empty( $item->url )        ? $item->url        : ”;
		$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 . ‘"’;
}
}
				$item_output = $args->before;
$item_output .= '';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before .  apply_filters( 'the_title', $item->title, $item->ID ) .  $args->link_after;
$item_output .= '';
$item_output .= !empty( $atts[‘description’] ) ?  '' .  esc_attr( $atts[‘description’] ) .  '' : ”;
$item_output .= $args->after;
				$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

Use the end_el() method

This method is the same as end_lvl()so that it shows the end of the element <li> in the menu.

From line 187 to 189 in /wp-includes/nav-menu-template.php It’s already set up like this:

public function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>n";
}

Several Walker Nav Menu libraries are available

Here is a list of walker libraries with various features available that you can reuse on the internet:

• wp-bootstrap-navwalker – Walker library to display the menu according to Bootstrap’s structure.
• wp-foundation-walker – Walker library to display the menu according to the Foundation’s structure.
• Clean-Menu-Walker – Walker library to display more compact menus, remove unnecessary classes.

Epilogue

In this article, I may have written a bit too long and explained it too carefully compared to the regulations, but such a thorough explanation will also help you somewhat better understand, avoiding questions or problems that are easily misunderstood. Therefore, if you have finished reading and still do not understand, please watch the video at the beginning of the article.