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.
+Steven D. Sanders
..hmm ‘the standard way’ – there is no such concept just because…
Generally speaking nav->ul->li->a is just a complication of a simple thing (nav->a).
As peoples in this tread pointed :
<nav><a>...</nav>
or for extra decorations<nav><div><a></a></div> ...</nav>
…can’t be simpler than that.I’ve been working on importing a non WP template into a WP template and I’d like to keep the same DOM structure and styles. The existing structure happened to be
what Chris posted in the comment below
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?
I did it like this…
add the span tag to link_before and after
dont forget to add the span tag (next to the a tag) so it doesnt get stripped out.
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-item
in there so I can use it to display the active page.I’m attempting to use Foundation’s Tab system, with
wp_nav_menu
to 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
html result :
it’s better ;)
thank u proxo!!! it worked for me!! :)
This is good.. now i want to assign class to dynamically
output should be like
<div class="ui secondary menu">
<a href="http://localhost/wordpress/lbs/" class="item">Home</a>
</div>
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 :-)
Hi Friends,
I have a problem to change the
<
ul> tag to
<
div> tag in wp_nav_menu.
Please help me..
my navigation is following format.
Homepage
About us
can anyone help me…
Anyway you can preserve the output of classes that are added in WP admin?
Hello there,
I’m creating wordpress menu from html. my nav menu looks like below
<ul>
<li class=”current”><a href=”index.html” class=”m1″>Home Page</a></li>
<li><a href=”about-us.html” class=”m2″>About Us</a></li>
<li><a href=”articles.html” class=”m3″>Our Articles</a></li>
</ul>
So anyone can suggest me how can I do this in wordpress menu
Presently I’ve done it like as under
<?php wp_nav_menu( array( ‘theme_location’ = > ‘primary’,’container_id’ = > ‘nav’,) );? >
But it didn’t work.:(
Hi great solution but couldn’t get it to work under WordPress 3.6. :-(
This is my solution that I managed to get working with WordPress 3.6.
Thanks for this. Worked in 3.6 for me.
Work for me.
I came up with a way using
str_replace
to maintain all the classes, including those for current menu items, on the links. It’s pretty straightforward:I wrote a blog post about it, if you’re looking for a little more info/ rational.
You’re a life saver!
Yes this is very interesting fact as when you are building footer navigation as you want those custom menu built on your custom menu options on dashboard, you want those small links to be added dynamically and is always centered. It was easier for an anchor to be set centered than those inside li’s.
Wonderful! I can always count on this site for the goods.
Stuck on one last thing…
Does anyone know how to add a class to the a tag (not dynamically)
I need the same class on each a tag in the menu.
I was able to get this done, using a simpler form of ruuters jquery solution above
If you add this to your functions file:
And then wrap your wp_nav_menu thusly:
You can totally do the same thing with php with the added bonus that it won’t break if someone turns off javascript.
Hi! Can somebody please, please tell me where to put this code, because it’s not mentioned anywere. Is it really that obvious, and I’m the only one stupid that can’t manage to find it out?
In any template file. e.g. index.php
HELLO Chris,
First of all, i must say A ZILLION THANKS :) !!!
I was goggling for the solution and the first answer was yours !
I had a menu markup without the div / ul / li of
wp_nav_menu
just a nav / a – a – a – … / navRemoving the div and the ul was easy of course, the CODEX !
But when it came to the li HOHOHO, it took me a couple of hour before googgling LOL
So again THANKS A ZILLION TIME for sharing your ninja code experience :) !!!
Trisha
thanks you solved my problem
thanks alot
Anyone know how to grab a sub-menu (unordered list in a li) to wrap that bad boy in a div?
Replying too late for you Dan I guess, but might help someone else:
You should be able to use the start_lvl and end_lvl functions of the Walker_Nav_Menu class. For example if you add this to functions.php:
and call your menu like this in your theme:
…something like that, I think :)
Thank you so so much for this little piece of code!!
I’ve just been doing this for a site and found it tricky to remove the list elements but retain all the useful ancestry classes like ‘current-menu-item’ etc. The only way I was able to do it was with a walker class to directly modify the wp_nav_menu output.
Here’s a link to my method (if links are frowned upon, tell me and I’ll paste it all here): http://myquickfix.co.uk/2014/08/remove-and-tags-from-wordpress-menus-while-retaining-all-the-classes/
http://stackoverflow.com/questions/25680791/trying-to-fetch-wp-nav-menu-dynamically-in-wordpress?noredirect=1#comment40135231_25680791
on this link i ask a question but no proper result, i have share my menus image and HTML, i am stuck please help me if you have any solution.
Thanks in Advance
This tutorials helps me so much.
Big thanks
Awesome tricks! I’m working on such an issue, and CSS-Tricks never let me down! Thank you Chris!
This is great but what if you want to supply the css classes defined in the menu items @ /wp-admin/nav-menus.php that would normally be applied to the li items, to the anchors directly?
I have a feeling preg_replace might be the simplest way to do this. I’m surprised in 2015 the walker class is not more flexible and easier for beginner theme developers to make the menu structure match any desired format.
Actually reading Zoe’s blog post from above helped solve this for me. Thanks Zoe!
Tried to modify Chris Hill’s version for wordpress 4.2.2, weirdly enough couldn’t spare the
<
nav> on strip_tags, so I just put it outside the echo.
Very nice Answer
Please guide how to achive this using your code
Services
Portfolio
Shop
i want to add class=”item” to
Thankx
Very nice Answer
Please guide how to achive this using your code
<div class="ui secondary menu">
<a href="" class="item">Services</a>
<a href="" class="item">Portfolio</a>
<a href="" class="item">Shop</a>
</div>
i want to add class="item" to <a>
Thankx
This solution doesn’t seem to work for me. Obviously I am overlooking something, so any help would be greatly appreciated.
I am trying to create a simple nav tag with nested a tags within. With this solution, I lose the ul and li, but also the “nav” tag altogether so I end up with just “a” tags…
$menuParameters = array(
‘theme_location’ => ‘primary’,
‘container’ => false,
‘echo’ => false,
‘items_wrap’ => ‘%3$s’,
‘depth’ => 0,
);
You can use the nav_menu_link_attributes
sorry for last wrong post…
It works for me with this :
‘menu’=>‘mainmenu’,
‘echo’ => false,
);
echo strip_tags(wp_nav_menu( $menuParameters ), ‘‘ );
?>
How can add I add class using this snippet?
nav > a.class
I manage to get the
a
part working, but failed to add classIt is cool that we are able to restrict menu depth output.
What I however don’t understand, is the fact that somehow its not automatically integrated with this filter, that in WP Admin -> Design -> Menus -> specific menu with depth set to 3
the user can still set menu items in depth layer 4, 5, 6, etc. This is confusing to the user. Any suggestions?