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 trialJoel David Crouse
9,062 PointsHow 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
6,514 PointsYou 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 */
}
Pavle Lucic
10,801 PointsInside 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
9,062 PointsYour awesome!
Pavle Lucic
10,801 PointsSolved this.
Here is the problem.
Go to manage locations http://ctrlv.in/608987
Select your menu http://ctrlv.in/608988
Save
Marc Cortez
2,977 PointsHey!
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
10,801 PointsTry to clear browser cache?
Marc Cortez
2,977 PointsYes, also restarted XAMPP. It's still not working.
Pavle Lucic
10,801 PointsCould you upload files and sql to dropbox?
Marc Cortez
2,977 PointsSure, if you give me your E-Mail add for your Dropbox.
Pavle Lucic
10,801 Points******@gmail.com
Marc Cortez
2,977 PointsThanks! I just shared the folder with you.
Pavle Lucic
10,801 PointsHey Marc, i set up your wp site. looks nice. Add me on skype pavle_lucic
Marc Cortez
2,977 PointsWow, that was fast. I just added you.
Pavle Lucic
10,801 PointsI didnt recieved any request.... Maybe wrong one :D
Marc Cortez
2,977 PointsI don't think so, because I see the same profile picture as you have in Treehouse :)
Pavle Lucic
10,801 PointsYes it is the same pic.... strange, i didnt recieve any request :), send me yours
Marc Cortez
2,977 PointsSure. hostedbymarc
Marc Cortez
2,977 PointsThanks Pavle!
I really appreciate your help :)
Pavle Lucic
10,801 PointsI am glad to help you :)
Joel David Crouse
9,062 PointsJoel David Crouse
9,062 PointsYour awesome!