How to Remove the UL Tag from the WordPress Nav Menu

WordPress nav menus are no doubt great but most of the time the additional markup associated with them is unwanted or unnecessary. At Daddy Design we prefer to remove the default UL tag generated by WordPress and add our own back for greater control. In this tutorial we will teach you how to remove the default UL tag from the WordPress Nav Menu.

Step 1: Removing the UL Tag from wp_nav_menu via WordPress Functions

The first step is to remove the UL tag from the WordPress Nav Menu (wp_nav_menu) by adding a PHP filter to your WordPress Functions file. Simply open your functions.php file then copy and paste the code below. The UL tag will now be completely removed from your WordPress Nav Menu.

PHP

function remove_ul ( $menu ){
    return preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu );
}
add_filter( 'wp_nav_menu', 'remove_ul' );

Step 2: Add your own UL Tag with custom ID and/or Classes

The final step is to add your own UL tag with custom ID and/or classes. Simply wrap the wp_nav_menu with a UL tag and apply your desired ID and/or classes wherever you are using it inside your WordPress theme template.

PHP

<ul id=”your-custom-id” class="your-custom-classes">
  <?php wp_nav_menu(); ?>
</ul>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.