Remove LI Elements From Output of wp_nav_menu
You can remove or change the <ul> container that you get by default with wp_nav_menu (codex) through parameters, but you can't remove the <li> elements that wrap each menu item. This is how you can actually remove them:
$menuParameters = array(
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
Just out of curiosity, why would you want to do this? Aren’t list items pretty much the standard way of building a nav menu?
I think
is totally reasonable.
Perfectly Reasonable! Even though HTML5 is awesome, I don’t like having to wrap another tag around navigation links. I’ve been using <nav> with just anchor tags in my navigation menus and reserving <ul> for actual unordered lists in the content. It makes more sense and is much cleaner, in my opinion.
Thanks Chris.
I’ve been looking for an output like the one seen on the comments, but I couldn’t make this snippet work for me. Please, someone, give me a hand with this. I promess helping spread the nice way to HTML menus on WP later on, okay?
make sure to put the theme location of your menu in the array.
‘theme_location’ => ‘primary’,
The default wordpress menu is ‘primary’. If you are using a custom menu use its handle instead. Then wrap that whole snippet between the <nav></nav> tags. I hope that helps.
I tried the code in some ways, but the best I could get was a menu at the beginning of my , while I want to use it to style the custom menus I’ve created. Is there anything special to the way this works?
“…menu at the beginning of my <body>..”.
I’m not sure what you mean, Did you select the menu in the admin side?
Go to Appearance >Menus and create the menu then select it under ‘Theme Locations’
Like this: http://codex.wordpress.org/Appearance_Menus_Screen
or are you asking about styling it with css? Just give your <nav> an id to select it with styles.
Sorry if that doesn’t help. If all else fails search the wordpress codex, it should have the right answer for you. http://codex.wordpress.org/Navigation_Menus
Best of luck
What about submenus? How should it look if it has a dropdown?
Wrap your sub menu in a DIV could work
Thank you, Chris!
Excellent website, great tutorials here and on http://www.lynda.com. I also purchased your book “Digging into WordPress” I highly recommend it to everyone who wants to learn WordPress. Thank you for all your help!
I’ve been wondering how to get rid of the list tags in a WordPress theme. I don’t know why it doesn’t just use the anchor tags by default, but thanks for this tutorial. It’ll make developing a WordPress theme so much easier.
Hi Chris,
You inspired me to learn WordPress. Thanks.
I need to know how to put span tag to add extra words in wordpress dynamic menu item as you have done with your menu?
And in this article you stripped all auto generated wp html tags for Menu. How you will style them if you have to design Dropdown Navigatoin?
it’s really nice and easy to use..
may i know one more thing please.. how to just like this
menu name
menu name
menu name
menu name
menu name
i found already solution here http://stackoverflow.com/questions/5222140/remove-li-class-id-for-menu-items-and-pages-list?answertab=oldest#tab-top
but problem is i have total 6 menu and two of them are drop down menu.. so i am seeing after add that code my drop down not working well and some css not work well so… but now i want some of menu which i will specify will be no class
Super helpful! Thank you!
another solution . http://wpquestions.com/question/show/id/2465
This was the PERFECT solution to a challenge I’m facing at work! However, I now need to figure a way to keep the
.current-menu-itemin there so I can use it to display the active page.I’m attempting to use Foundation’s Tab system, with
wp_nav_menuto create a fluid, easy-to-manage navigation bar…Same question here
Found an easy solution. Use jQuery:
Works great! Thanks
Thanks for the help on this one. But, I am wondering how we can get the classes applied to the A tags that were on the LI tags? I am trying to get current page but I would also like to have current parent page so not sure if wp_nav_menu can help anyway?
I actually saw that you add a class to the body and have classes on the nav items to handle this. Pretty sure you actually talked about this in your screencasts. Thanks
Php code
<?php $defaults = array( 'theme_location' => 'my-menu', 'container' => 'nav', 'container_class' => 'menu', 'echo' => false, 'fallback_cb' => false, 'items_wrap' => '%3$s', 'depth' => 0 ); echo strip_tags(wp_nav_menu( $defaults ), '<nav><a>'); ?>html result :
it’s better ;)
This is handy. Thanks!
Hi, can you tell me how to add extra element in wordpress menu, can we do it using javascript? like on my site I want one last element on my main menu with big dropdown box to show social buttons!
is there any way just to remove the LI Class and ID?
Try this solution posted by Revelation Travis. Maybe it will help you?
“Here is a fix that I’ve come up with. It removes all the id’s and classes from the wp_nav_menu, but allows you to come up with your own “approved” list of classes and/or id’s. It also changes the lengthy “current-menu-item” to “active”. If you prefer to keep the the default WordPress CSS styles, just delete that section of the code. For the sake of keeping this post minimal, here are the links to the pastebin with the code:
http://pastebin.com/W16cxDfY – for your functions.php file
http://pastebin.com/CGx4aprf – for your template, wherever the menu goes”
I have few menus created in the appearance > menus and all I need is to have different .current-menu-item class in each of them, cause left menu is with triangle arrows in hyperlinks, but header menu and bottom menu are different. Chrome, Safari IE 10 and Firefox display menu correctly, but in IE 6, 7, * and the newest Opera, so in older versions also, menus are displayed in wrong way. Cause all menus inherit .current-menu-item class.
Example css code which is inherit and loaded to header and bottom menus.
css current-menu-item class for left sidebar menu:
.menu-wynajem-akcesoriow-container li.current-menu-item a {
margin-left:37px;
color: #000000;
font-weight:bold;
background: transparent url(images/arrow.png) 0px 15px no-repeat;
css current-menu-item class for header menu:
div#header-content-menu li.current-menu-item a {
color: #ffffff;
background-color:#445d8a;
height:52px;
}
css current-menu-item class for bottom menu:
.columns-bottom .col-02 li.current_page_item a {
color: #4d74bc;
}
All I know I need different current class or id for each menu, so every broser will display it correctly. Any ideas?
http://stackoverflow.com/questions/5222140/remove-li-class-id-for-menu-items-and-pages-list?answertab=oldest#tab-top
The last post , where are links to pastebin can be a solution?
thanks proxo – that code snippet was exactly what i needed :-)