Nitish
Nitish

Reputation: 2763

adding class to ul in wordpress

I am new to wordpress themeing. I am trying to display the navigation menu

<div class="nav-collapse" id="collapse">
    <ul class="nav nav-pills">
        <li ><a href="index.php">Home</a></li>

        <li ><a href="facilities.php">Facilities</a></li>
        <li ><a href="tariff.php">Rooms &amp; Tariff</a></li>
        <li ><a href="bookings.php">Booking</a></li>
        <li ><a href="contact.php">Contact</a></li>
    </ul>
</div><!-- /.nav-collapse -->

For that I have registered menu in functions.php

function heritage_register_theme_menu() {
    register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'heritage_register_theme_menu' );

And added the menu in header.php :

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => 'nav-collapse',
    'container_id'    => '',
    'menu_class'      => 'nav nav-pills',
    'menu_id'         => '',
    'echo'            => true,
    //'fallback_cb'     => false,
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
);

wp_nav_menu( $defaults );

But in the source when I checked, it displays the HTML as :

<div class="nav nav-pills">
    <ul>
        <li class="page_item page-item-9"><a href="http://localhost/projects/wordpress/?page_id=9">PHP Developer</a></li>
        <li class="page_item page-item-2"><a href="http://localhost/projects/wordpress/?page_id=2">Sample Page</a></li>
    </ul>
</div>

So I want to know :

  1. How to add class to wrapping div ?
  2. How to add class nav nav-pills to ul instead of wrapping div ?

Upvotes: 0

Views: 1673

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19338

You've registered a nav menu in functions.php but you aren't using it when using wp_nav_menu.

Change:

'theme_location'  => '',

To:

'theme_location'  => 'primary',

You'll then need to go to Appearance -> Menus and setup your menu if you haven't done so already.

Upvotes: 1

Related Questions