Remove wrapping div and ul from output of wp_nav_menu
-
16-10-2019 - |
Question
I am using the new menu system of Wordpress, and here is the result of wp_nav_menu()
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-21 current_page_item menu-item-28"><a href="http://www.bemang.com/">Trang nhà</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="http://www.bemang.com/blog/">Blog</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="http://www.bemang.com/gioi-thieu/">Giới thiệu</a></li>
</ul>
</div>
What I want is only this:
<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-21 current_page_item menu-item-28"><a href="http://www.bemang.com/">Trang nhà</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="http://www.bemang.com/blog/">Blog</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="http://www.bemang.com/gioi-thieu/">Giới thiệu</a></li>
No, wrapping div or ul, I have been trying to few ways and google around but no result :(
Solution
The wrapping div is easy. When you use wp_nav_menu()
, add this argument: 'container' => false
For the <ul>
element, there's an argument called 'items_wrap'
. See woodchucky's answer for more info on that one (and upvote it!).
OTHER TIPS
wp_nav_menu()
accepts an undocumented parameter
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>
'
This is executed by:
$nav_menu .= sprintf( $args->items_wrap, esc_attr( $wrap_id ), esc_attr( $wrap_class ), $items );
you can play around with the sprintf arguments
ex: 'items_wrap' => '%3$s' would remove the wrapping <ul>
tag
For outputting only li's add this to wp_nav_menu array:
'container' => '',
'items_wrap' => '%3$s',
'container' => false
was failing for me because I was specifying a not existing 'theme_location'
and 'menu'
. It worked as soon as I fixed this.
Solution from: wordpress.org/support
To filter out the wrapping div:
add_filter('wp_nav_menu_args', 'prefix_nav_menu_args');
function prefix_nav_menu_args($args = ''){
$args['container'] = false;
return $args;
}