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


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

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

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

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.