wp_nav_menu() custom container and container_id

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:

Read More
<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.

Related posts

Leave a Reply

4 comments

  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”

  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>
    
  3. 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 🙂