1

I have created a custom menu widget, which is, in fact, a replica of the default widget provided by the core WordPress files.

But I am facing few challenges it is not able to accommodate my custom menu, classes.

I checked the page into the browser and it is rendering this kind of HTML →

I have received some answer that is about to solve my problem. So, in short, I am bit educated now than before. The issue is this → If I use this →'menu_class' => 'footer-menu' then it is injecting new class in the <ul></ul> tag, but that is not wanted. I want to inject my class in the div tag.

Currently, this structure is coming → <div class="menu-menu-1-container"><ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul></div>


But I want it like this →

<nav class="footer-menu"> <ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"> <a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul> </nav>

So I think if somehow I can inject a new class in the container parameter + change its structure from div to nav then everything seems to be fixed.

The Live WP Link

2

(Updated based on comments below.)

<div class="menu-menu-1-container"> is coming from WP's default menu container. You can customize what tag is used (div, ul, etc.) or tell WP not to use a container at all, as well as set the ID and/or class (menu-menu-1-container, etc.) by using the container, container_class and container_id arguments when you call wp_nav_menu.

<ul id="menu-menu-4" class="menu"> - you can easily change this class and ID by including menu_class and menu_id when you call the menu, toward the end of your "Front End display" block:

$nav_menu_args = array(
    'fallback_cb' => '',
    'container' => 'ul',
    'container_class' => 'my_custom_container_class',
    'container_id' => 'my_custom_container_id',
    'menu' => $nav_menu,
    'menu_class' => 'my_custom_css_class',
    'menu_id' => 'my_custom_css_id'
);

Change class and ID to whatever you like, variables or whatever. Make sure if you'll be displaying multiple menus on a single URL you set the ID to a dynamic variable so you don't have multiple menus with the same ID.

If you need to customize anything further, WP's code reference on wp_nav_menu lists everything you can tweak. If even that is not enough, consider looking into a custom walker.

  • You can change the wrapping div and its class with the container parameter in $nav_menu_args. – cjbj May 1 '17 at 19:42
  • @cjbj Just like 'menu_class' => 'my_custom_css_class',? Can you guide me who, and what parameters will be used in doing so? – The WP Novice May 2 '17 at 0:16
  • @WebElaine → <div class="menu-menu-1-container"> is coming from somewhere else. You need to track it down within your theme to change it. _____________ This is coming nowhere from my class but from some default WordPress core. I think this can be disabled. I watched some video on tutsplus.com a few months back, but could not recall from where in those videos they were educating how to disable these classes by putting something to false. – The WP Novice May 2 '17 at 0:16
  • @WebElaine I tried this class → 'menu_class' => 'footer-menu', and the CSS is imposed in the < ul> tag. Click Here. There should be some method to eliminate(or putting to false) this from the </div> → menu-menu-1-container – The WP Novice May 2 '17 at 0:24
  • Finally it looks like that I have solved it → 'container' => 'nav', 'container_class' => 'footer-menu' – The WP Novice May 2 '17 at 1:24

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.