wp_nav_menu() custom container and container_id

Question

So today I started work on my first Wordpress theme and so far it's been a lot of fun. However, I have had difficulty in getting wp_nav_menu() to do what I want.

Here's what I want:

<nav id="topnav" class="menu">
   <ul>
      <li class="current_page_item"><a href="#" title="Home">Home</a></li>
      <li class="page_item page-item-2"><a href="#" title="About">About</a></li>
   </ul>
</nav>

Looking in the documentation, I would expect the following call to do what I want:

<?php wp_nav_menu(array( 'container' => 'nav', 'container_id' => 'topnav' )); ?>

But instead I get this:

<div class="menu">
   <ul>
      <li class="current_page_item"><a href="#" title="Home">Home</a></li>
      <li class="page_item page-item-2"><a href="#" title="About">About</a></li>
   </ul>
</div>

To me it looks like my custom parameters are being ignored as the output from wp_nav_menu() is exactly the same. Is there something I need to turn on somewhere to enable this or is there something else going on?

EDIT

Curiously, if I change menu_class it alters the div's class (I expected the div to be the container) but changing menu_id does nothing.

EDIT 2

Even going into nav-menu-template.php and changing the defaults for container, container_id, container_class, menu_id does nothing. Changing menu_class to yyy will change the div's class from menu to yyy.

Answer 1

i had the save problem: it's because if you don't create the menu in the admin wordpress use a fallback method and creates the menu out of all active pages ... and if this happens than the options from wp_nav_menu are not used ...

so: just create the menu in the admin and u can change the wrapper-tag to "nav"

Answer 2

First of all, you won't be able to get WordPress to output any kind of <nav> element using native functions. <nav> is an HTML5 tag, and WordPress is built to generate XHTML output ... i.e. no <nav> element.

---

Edit: Apparently the function does allow nav ... but keep in mind that the rest of the WordPress core is still built to output XHTML, not HTML5 ... take care to make sure your site validates properly.

---

Try removing that reference ... it might be causing the error that's ignoring your 'container_id' => 'topnav' instruction. If things work right without the reference to nav you should have this:

<div id="topnav" class="menu">
   <ul>
      <li class="current_page_item"><a href="#" title="Home">Home</a></li>
      <li class="page_item page-item-2"><a href="#" title="About">About</a></li>
   </ul>
</div>

Answer 3

The Menu API is partially broken, you can not rely on the output. There are diverse tickets in trac regarding that, I only did a quick search, but maybe a solution for your problem is explained in one of them:

• #14560 - class 'current-page-parent' is being to the parent page and to the parent page of other menu items
• #14529 - wp_nav_menu() gives different results when called multiple times - reproducable
• #14208 - by adding a custom menu with the url without the slash (/) the menu dont active in front page
• #14250 - wp_nav_menu separator and first last class

Answer 4

not sure if anyone is still looking to solve this - but just got here trying to find the answer myself - thought I'd share my solution :)

Also wanted to use the <nav> instead of the <div> element and solved it by removing the <div>, as stated on this page, wordpress codex: http://codex.wordpress.org/Function_Reference/wp_nav_menu:

<?php
function my_wp_nav_menu_args( $args = '' )
{
    $args['container'] = false;
    return $args;
} // function

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
?>

Added to my functions.php file, marked up the theme file with the <nav> tag & all worked fine for me ;) hope this helps :)