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

Posted by Joel David Crouse
Joel David Crouse
9,062 Points

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

Christian Moran
Christian Moran
6,514 Points
Christian Moran
Christian Moran
6,514 Points

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 */
}
Joel David Crouse
Joel David Crouse
9,062 Points

Your awesome!

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

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

Joel David Crouse
Joel David Crouse
9,062 Points

Your awesome!

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

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

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

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!

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

Try to clear browser cache?

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

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

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

Could you upload files and sql to dropbox?

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

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

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

Thanks! I just shared the folder with you.

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

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

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

Wow, that was fast. I just added you.

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

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

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

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

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

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

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

Thanks Pavle!
I really appreciate your help :)

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

I am glad to help you :)