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: enter image description here

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

回答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

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

回答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

回答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

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

来源：https://stackoverflow.com/questions/22742630/wp-nav-menu-add-class-on-ul

标签

css

wordpress

twitter-bootstrap