15

I'm converting this html menu to wordpress:

<ul>
    <li><a href="/" class="current"><span>Home</span></a></li>
    <li><a href="/"><span>About</span></a></li>
</ul>

i use:

wp_nav_menu(array(
 'menu'=>'mainmenu' ,
 'container'       => false, 
 'link_before'     => '<span>',
 'link_after'      => '</span>',
 'theme_location'  => 'primary')
 );

but the html i get is:

<div class="menu">
    <ul>
        <li class="current_page_item"><a href="http://localhost/goodsoil/" title="Home"><span>Home</span></a></li>
        <li class="page_item page-item-2"><a href="http://localhost/goodsoil/?page_id=2" title="About"><span>About</span></a></li>
    </ul>
</div>

If i use a custom menu then i get:

<ul id="menu-test" class="menu">
    <li id="menu-item-6" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="url/"><span>Home</span></a></li>
    <li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-5"><a href="url/?page_id=2"><span>About</span></a></li>
</ul>

but if i don't use a custom menu 'container'=>false doesn't work Any solution?

2
  • What do you mean by if i don't use a custom menu ? Could you please describe more clearly under which conditions you get desired result and when not?
    – Rarst
    Nov 8, 2010 at 20:33
  • My theme supports custom menus. If i use a custom menu the 'container'=>false works fine, but if not it doesn't works. If i use 'container'=>'' happens the same.
    – Oterox
    Nov 9, 2010 at 15:29

7 Answers 7

19

[SOLVED] IT DOES NOT WORK when you are referring to an inexisting location. e.g. when you copied the code from somewhere else, or you haven't created your menu or location yet in the dasboard.

e.g. remove ", 'theme_location' => 'primary'" from the following code:

    wp_nav_menu( array( 'container'=> false, 'menu_class'=> false, 'menu_id'=> 'ia_toplevel', 'theme_location' => 'primary' ) );

so it shoult look like

    wp_nav_menu( array( 'container'=> false, 'menu_class'=> false, 'menu_id'=> 'ia_toplevel' ) );

It works fine WITHOUT container in my website SocialBlogsiteWebDesign.com

4
  • It seems not work in wordpress 3.9 Apr 22, 2014 at 0:42
  • Create your menu in the admin in appearance->menu first then call the wp_nav_menu(array('menu'=>'<menu_name>','container'=>false))
    – Warface
    May 11, 2014 at 0:40
  • Well, that's a pretty odd behavior :/ I think this is an issue that should be tracked. May 26, 2020 at 8:12
  • ... or don't remove it, and actually take a minute to create a menu location. Jul 14, 2023 at 3:15
6

Found the solution.

Simply use "ul" for 'container'

wp_nav_menu(array(
 'menu'=>'mainmenu' ,
 'container' => 'ul',
 'menu_class'=> '',
 'link_before'     => '<span>',
 'link_after'      => '</span>',
 'theme_location'  => 'primary')
 );
3
  • 1
    I think this is exactly what I am looking for too, how to remove the unnecessary div from my nav menu!
    – Krys
    Oct 5, 2020 at 14:21
  • Somehow this answer works but not empty string or false. Thanks. May 13, 2021 at 12:41
  • this saved my life from a hell i tried all tuts all not working with latest versions this worked just exact as i want Oct 12, 2021 at 3:00
5
Try: <?php wp_nav_menu( array( 'container' => '' ) ); ?>

http://codex.wordpress.org/Function_Reference/wp_nav_menu

4
  • 1
    It is checked as if ( $args->container ) in code so false or empty string doesn't make a difference.
    – Rarst
    Nov 8, 2010 at 20:34
  • Rarst, I just tested it with a site I've been working on lately, and setting 'container' => '' did actually work. I think it's not testing for value, but more setting to null and thus not outputting data.
    – tw2113
    Nov 8, 2010 at 22:21
  • 'container' => '' doesn't work for me. I'm using wp 3.0.1
    – Oterox
    Nov 9, 2010 at 15:25
  • doesnt work for me too ... with wp 3.2.1
    – papachan
    Dec 1, 2011 at 12:11
5

you are referring to the fallback function of the nav_menus. This is "wp_page_menu" and unfortunatelly it doesn't produce the same type of markup that a custom menu does.

To fix this create your own fallback menu. I'm using this:

function my_page_menu($args){
  $menu = '';
  $args['echo'] = false;
  $args['title_li'] = '';

  // If the front page is a page, add it to the exclude list
  if (get_option('show_on_front') == 'page') $args['exclude'] = get_option('page_on_front');

  $menu .= str_replace(array("\r", "\n", "\t"), '', wp_list_pages($args));

  if($menu):
    if($args['container']) $menu = '<'.$args['container'].' class="'.$args['container_class'].'">'.$menu;
    $menu .= '<ul class="'.$args['menu_class'].'">'.$menu;

    // add 'home' menu item
    $menu .= '<li class="home '.((is_front_page() && !is_paged()) ? 'current-menu-item' : null).'"><a href="'.home_url('/').'" title="'.__("Home Page").'">'.$args['link_before'].__("Home").$args['link_after'].'</a></li>';

    $menu .= '</ul>';
    if($args['container']) $menu .= '</'.$args['container'].'>\n"';
    $menu = apply_filters('wp_page_menu', $menu, $args);
  endif;

  echo $menu;
}

You might need to change this as my theme handles menus its own way, but I think you get the basic idea.

And when you're calling wp_nav_menu do it like wp_nav_menu(array('fallback_cb' => 'my_page_menu'));

You can also match the classes to the ones of a custom menu using this:

add_filter('page_css_class', 'atom_page_css_classes', 420, 2);
function atom_page_css_classes($classes, $page){
  // overwrite and use page (safe) name instead of ID; nobody styles IDs...
  $new_classes = array('page-'.$page->post_name);

  // adjust active menu classes to match the ones added by wp_nav_menu()
  foreach($classes as $class)
    if($class == 'current_page_item') $new_classes[] = 'current-menu-item';
    elseif($class == 'current_page_parent') $new_classes[] = 'current-menu-parent';
    elseif($class == 'current_page_ancestor') $new_classes[] = 'current-menu-ancestor';

  return $new_classes;
}

This way you cut down a few CSS rules...

1

I developed a simple and efficient solution using str_replace, which can be applied separately for use in menu tables rather than ul li:

$menu = wp_nav_menu( array( 
    'theme_location' => 'main-menu', 
    'container_id' => 'mainMenu', 
    'container_class' => 'ddsmoothmenu',
    'echo' => FALSE
));

$menu = str_replace(
    array('ul id="main-menu" class="menu">','/ul>','li','/li>'), 
    array('table id="main-menu" class="menu">tr>','/tr>/table>','td','/td>'), 
    $menu
);

echo $menu;
1
  • This is a bad idea as it will fail if there's ever any changes to the code the core spits out. Jul 14, 2023 at 3:13
0

TL;DR - use

<?php
wp_nav_menu(
    array(
        // your menu id etc. goes here
        'items_wrap' => '%3$s', // removes the default <ul> 
        'container'  => '', // removes the outer <div>
    )
);

The default structure for wp_nav_menu with as few args as possible will be

<div class="menu-blahblah-container">
  <ul id="blahblah">
    <li class="menu-item">
    <li class="menu-item">
    <!-- etc -->

The items_wrap parameter defaults to <ul id="%1$s" class="%2$s">%3$s</ul> - so there's some fun easy ways there to manipulate things outside of what the question is here. But if you just want to totally remove that ul just change it to %3$s which basically means "all the stuff inside the ul; none of the ul."

So now we have:

<div class="menu-blahblah-container">
  <li class="menu-item">
  <li class="menu-item">
  <!-- etc -->

You're left with a bunch of li's which is sweet! But they are trapped inside of a div, which is not sweet if you want to use them alongside some other custom li's in your own nice little homebaked ul.

So now add in the 'container' => '' bit others have suggested and you're home free: just the list items part of the menu with no container elements!

<li class="menu-item">
<li class="menu-item">
<!-- etc -->
-1

Try This

<?php wp_nav_menu( array( 'menu' => 'Menu','link_before' => '<span>', 'link_after' => '</span>' ) ); ?>

Not the answer you're looking for? Browse other questions tagged or ask your own question.