Remove div and ul from wp_nav_menu

Posted on: February 25th, 2013

I looked and looked for ways to remove div and ul from wp_nav_menu() and I finally found a way.

The Code

<?php wp_nav_menu(array(
   'menu' => 'Main Menu', 
   'container' => false
)); ?>

So it all starts with the wp_nav_menu function, which I generally use to display my menus.

The $args

There is a whole list of arguments that you can use for the function and as you can see I’ve only used three. The menu argument dictates which menu is going to show up. I have a menu saved as Main Menu, so if I have that in my arguments, that particular menu will show up.

Next is ‘items_wrap’ which I still don’t fully understand. If someone else knows better than me, seriously, let me know in the comments and I will thank you profusely. The way I understand it is that %3$s just tells WordPress, “hey, this is where the list of items are going to be. Feel free to wrap ’em.” In this case we are refusing to wrap them with anything, thus, no <ul> are being used.

To explain what the Codex says, let’s take a look at the individual parts of ‘items_wrap’.

“Evaluated as the format string argument of a sprintf() expression. The format string incorporates the other parameters by numbered token. %1$s is expanded to the value of the ‘menu_id’ parameter, %2$s is expanded to the value of the ‘menu_class’ parameter, and %3$s is expanded to the value of the list items. If a numbered token is omitted from the format string, the related parameter is omitted from the menu markup.
Default: <ul id=”%1$s” class=”%2$s”>%3$s</ul>”

Breaking it down further:

  • %1$s – is equal to the menu_id param, which defaults to ‘menu-{menu slug}’
  • %2$s – is the same as menu_class param, with a default of ‘menu’
  • %3$s – the output of the list items, so the <li> and the <a>’s inside

Seems to make sense when we break it down.

Moving forward to ‘container’, the default is div and setting it to false prevents any extra container from showing. I get the same result by just using ‘container’ => ”, but the Codex says to set it to false, and who am I to argue.

That’s it. We’ve broken down the full array and now understand a little more about how to remove div and ul from wp_nav_menu. Like I said, if you have more insight, please feel free to share. Otherwise, check out some more WordPress functions: Custom Taxonomy Category Dropdowns or Custom Excerpt Lengths.

Tags: , , , , ,

previous post: Adobe Edge Reflow – First Look next post: Compass Won’t Compress Sass to CSS