wp_nav_menu - add class on UL

I am learning wordpress together with bootstrap and somehow I can't add class on UL tag.

In the screenshot, I want to add class nav nav-tabs on UL but it was added on parent div

$defaults = array(
    'menu_class'=> 'nav nav-tabs',        
);

wp_nav_menu( $defaults ); 

Inspected element:

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

Answers


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


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]'
 ) );

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.


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>'
); ?>

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


Need Your Help

How to get string objects instead of Unicode from JSON?

python json serialization unicode python-2.x

I'm using Python 2 to parse JSON from ASCII encoded text files.

Why iterator.remove does not throw ConcurrentModificationException

java collections foreach iterator

What does iterator.remove() do differently from list.remove(), so that iterator does not throw an exception and list.remove() does throw one? In the end, both are modifying the collection size.