How to wrap the list with custom class using wp_nav_menu?

Question

How to wrap the list with custom class using wp_nav_menu?

Jai Shankar

2022年2月3日 15:06

I want to display 4 column footer menu. but when I add new menu the wp_nav_menu create a li > and add every menu items to it.

now, how can I wrap every li element with a custom div tag with a class?

I need this output :

In the above image, you can see every menu is wrapped inside a div.

I tried with wp_nav_menu() it does not help. As I'm new to WordPress theme development I don't know more option.

Is there any way I can say WordPress to add a div element with a custom class to add before every menu item?

Thanks :)

Topic footer navigation menus customization Wordpress

Category Web

admcfajn · Accepted Answer · 2020年4月4日 02:27

Perhaps use a nav_walker or a filter on wp_nav_menu_objects

Here is a simple nav_walker which, when output on wp_nav_menu will wrap the contents of each link in the menu with a span

<?php
/**
 * Add_Span_Nav_Walker
 * wp_nav_menu walker-class to wrap contents of each menu-item link in span element
 */

class Add_Span_Nav_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "\n$indent\n";
    }

    function end_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "$indent\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

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

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

        $class_names = $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 . '';

        $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 ) . '"' : '';

        $item_output = $args->before;
        $item_output .= '<li' . $class_names . '><a' . $attributes . '><span>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</span></a>';
        $item_output .= $args->after;

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


    function end_el( &$output, $item, $depth = 0, $args = [] ) {
        $output .= "\n";
    }
}

When we output our nav_menu in the them we can use Add_Span_Nav_Walker as the walker class:

<?php
if ( has_nav_menu( 'wpse288486_nav' ) ) :
    wp_nav_menu( [
        'theme_location' => 'wpse288486_nav',
        'walker'         => new Add_Span_Nav_Walker(),
    ] );
endif;

Elke · Accepted Answer · 2017年12月13日 09:16

It is best to loop through all the menu items so you can get them separately, like this. This will give you the possibility to add classes to both your ul and your li items.

    <?php $myMenu = get_nav_menu_locations();

// 'main-menu' is the name of your menu, you can find this under 'menu' in the Dashboard of your Wordpress site
$menuID = $myMenu['main-menu'];

$mainNav = wp_get_nav_menu_items($menuID);

?>
<ul>
    <?php foreach ($mainNav as $navItem): ?>

        <li>
            <a href="<?php echo $navItem->url; ?>"
              title="<?php echo $navItem->title; ?>">
              <?php echo $navItem->title; ?>
          </a>
      </li>
  <?php endforeach; ?>
</ul>

How to wrap the list with custom class using wp_nav_menu?

About