wp_nav_menu – add class on UL

6 comments

1. First of all, you need to create a custom navigation menu from Appearance -> Menus.

   Then, use the wp_nav_menu with the following parameters:

   <?php 
   $args = array(
       'menu_class' => 'nav nav-tabs',        
       'menu' => '(your_menu_id)'
   );
   wp_nav_menu( $args ); 
   ?>
   

   There’s a lot you can read about WordPress Menus. I suggest the following:
   http://codex.wordpress.org/Navigation_Menus
   http://www.paulund.co.uk/how-to-register-menus-in-wordpress

   Log in to Reply

2. You need to specify the container element, in our case 'ul' tag, and than specify the class that we will assign in 'menu_class'. Here is the sample code:

   wp_nav_menu( array(
       'theme_location' => 'top-menu',
       'container' => 'ul',
       'menu_class'=> '[add-your-class-here]'
    ) );
   

   Log in to Reply

3. Update: this was caused by the fact that i didn’t have a menu created in the menu page.

   I want to add a class to the ul of wp_nav_menu. I tried this code:

   <?php
   
   $defaults = array(
       'menu_class'      => 'menu',
       'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
   );
   
   wp_nav_menu( $defaults );
   
   ?>
   

   According to wordpress codex changing the menu from 'menu_class' => 'menu', should change the class of the ul, but instead it changes the class of the div wrapping the ul.

   Sample Page

   Log in to Reply

4. I had the same problem, so I changed the word “theme_location” to “name” and it works perfectly.

   Example:

   $defaults = array(
       '[INSTEAD OF PUTTING "theme_location" PUT "name"]'  => 'THE NAME OF YOUR "theme_location"',
       'menu_class' => 'YOUR CLASS', **[It will change the <UL> class]**
       );
   
       wp_nav_menu( $defaults );
   

   So for your code:

   wp_nav_menu( array(
       'name' => 'top-menu',
       'menu_class'=> 'YOUR CLASS'
    ) );
   
    wp_nav_menu( $defaults );
   

   enter image description here

   You can also put it into a container like a <DIV> or a <NAV> etc.

   Example:

   $defaults = array(
       'name'  => 'top-menu',
       'menu_id'         => 'YOUR ID',
       'container'       => 'nav',
       'container_class' => 'YOUR CONTAINER CLASS (<nav> in this case)',
       'menu_class'      => 'YOUR CLASS FOR <UL>',
       );
   
       wp_nav_menu( $defaults );
   

   enter image description here

   Log in to Reply

5. This is how you should do it, it works for me.

   <?php wp_nav_menu( $menu_meta );
   
   $menu_meta = array(
       'menu' => 'MENU-NAME-HERE',
       'items_wrap' => '<ul id="MENU-ID" class="MENU-CLASS">%3$s</ul>'
   ); ?>
   

   Log in to Reply

6. You can try this. It works for me

        wp_nav_menu( array(
       'theme_location' => 'main-menu',
       'container' => 'ul',
       'menu_class'=> '[your-class-here]'
    ) );
   

   Log in to Reply