How to Remove the <ul> container with the wp_nav_menu function

Although WordPress has an option to remove the container from the wp_nav_menu function, that is generally for the <div> and not the <ul> that wraps the <li> items. So, while you can use the options to remove the <div>, the <ul> will stay. It might be good to use a filter method like add_filter( ‘wp_nav_menu’, ‘remove_ul’ ) to accomplish the filter I have below, but that the filter was not being applied at the time of writing, so I (used to) recommend changing the echo option to false, and returning the value of the wp_nav_menu function to a variable, and then running a regular expression on it to remove the encompassing </ul><ul> and </ul>.

This code worked for me, running WordPress 3.0.4:

$options = array(
  'echo' => false
  ,'container' => false
);

$menu = wp_nav_menu($options);
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );

Use Site Pages as a Default Fallback

If you want it to use the site’s pages as a default (if no menu is specified and the function is called), you can add an additional function and change the options array as shown:

function default_page_menu() {
   wp_list_pages('title_li=');
} 

$options = array(
  'echo' => false
  ,'container' => false
  ,'fallback_cb'=> 'default_page_menu'
);

$menu = wp_nav_menu($options);
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );

Update: A Better Way to Remove the <ul> element

I think as of WordPress 3.1 they added a new parameter to make it easier to get rid of the </ul><ul> that wraps the menu. It is called items_wrap

When you call wp_nav_menu you will want to specify that option.

By default it is set as:

'items_wrap' => '</ul><ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>'

To get the ul to go away change it to:

'items_wrap'=>'%3$s'

Also, someone had a question about changing the <li> elements to <divs>. I would recommend doing this with CSS instead (i.e. just set them to display as blocks), but if really want to do that you might want to use a regular expression like this:

$menu_items = preg_replace('#<li #','<div',$menu_items);
$menu_items = preg_replace('#/li>#','/div>',$menu_items);

Or use a menu walking function like the one described on this page.

Related Posts:

• No Related Posts