1

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.

enter image description here

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

I need this output :

enter image description here

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 :)

0

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>
| improve this answer | |
0

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;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.