Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Building Out WordPress Navigation Coding A Basic Navigation in WordPress

How can I add a class to a menu item using the wp_nav_menu function

I need to add a class to a menu item using the wp_nav_menu function

<li class="my_class"></li>

8 Answers

You can add a class to each li from the admin panel. Go to yoursite.com/wp-admin/nav-menues.php

At the top open ‘screen option’ then check ‘css classes’. Now when you expand each list item of the menu you should see ‘css classes’.

Another way that you could do this is by giving wp_nav_menu a menu_id parameter.

Example

<?php

$defaults = array(
    ‘menu’ => ‘yourmenu’,
    ‘menu_id’ => ‘myMenu’
);

wp_nav_menu($defaults);

?>

Then with css you could style your li.

ul#myMenu li {
    /* your styles here */
}

Your awesome!

Inside admin panel , in menus. You have ability to manualy enter the classes.

http://wpcrux.com/wp-content/uploads/wp-nav-menu-css-class-2x.jpg

here is an example

Your awesome!

Solved this.

Here is the problem.

  1. Go to manage locations http://ctrlv.in/608987

  2. Select your menu http://ctrlv.in/608988

  3. Save

  4. Done http://ctrlv.in/608989

Hey!

Unfortunately it doesn't work for me at all. I already enabled CSS Classes under Screen Options and manually entered classes for each menu item. The page source still shows the WP generated classes.

This is what I have in my header.php:

$defaults = array(
                        'container' => false,
                        'theme_location' => 'primary-menu'
                    );
                    wp_nav_menu( $defaults );

This is from my static index.html:

<ul>
          <li class="hvr-sweep-to-right"><a href="#">Home</a></li>
          <li class="hvr-sweep-to-right"><a href="#">Geschäftsmodell</a></li>
          <li class="hvr-sweep-to-right"><a href="#">Leistungsprofile</a></li>
          <li class="hvr-sweep-to-right"><a href="#">Management</a></li>
          <li class="hvr-sweep-to-right"><a href="#">Marktkompetenzen</a></li>
          <li class="hvr-sweep-to-right"><a href="#">Kontakt</a></li>
          <li class="hvr-sweep-to-right"><a href="#">Impressum</a></li>
</ul> 

This is what I get from the page source:

<div class="menu">
<ul>
<li class="page_item page-item-17"><a href="http://localhost/lpp/impressum/">Impressum</a></li>
<li class="page_item page-item-13"><a href="http://localhost/lpp/kontakt/">Kontakt</a></li>
<li class="page_item page-item-15"><a href="http://localhost/lpp/management/">Management</a></li>
</ul></div>

Also, I don't want <div class="menu"> either. How can I get rid of this wrapper? I would be very thankful if someone could help me out, since I'm a full beginner developing WP-Themes!

Try to clear browser cache?

Yes, also restarted XAMPP. It's still not working.

Could you upload files and sql to dropbox?

Sure, if you give me your E-Mail add for your Dropbox.

******@gmail.com

Thanks! I just shared the folder with you.

Hey Marc, i set up your wp site. looks nice. Add me on skype pavle_lucic

Wow, that was fast. I just added you.

I didnt recieved any request.... Maybe wrong one :D

I don't think so, because I see the same profile picture as you have in Treehouse :)

Yes it is the same pic.... strange, i didnt recieve any request :), send me yours

Sure. hostedbymarc

Thanks Pavle!
I really appreciate your help :)

I am glad to help you :)