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

Kyle Arbuckle
Kyle Arbuckle
1,124 Points

How to add classes to the <li> tag in addition to the <ul> tag?

I looked through the WP documentation and can't find any resources on how to do this. I have some JS that uses a class on the <li> tag to add a scrolling animation when using anchor links.

The wordpress function is wp_nav_menu http://codex.wordpress.org/Function_Reference/wp_nav_menu

Can anyone refer me to some clear resources for a beginner or give me an explanation?

Thank you!

2 Answers

Kevin Korte
Kevin Korte
28,149 Points

I'm assuming this is wp generated code, what function call in wp is generating the html?

Kevin Korte
Kevin Korte
28,149 Points

No worries, adding to the <ul> is easy, that can be done through the arguments you can pass when you call the wp_nav_menu function.

Something like

<?php
$args = array(
  'menu_class' => 'my-menu-class'
);

wp_nav_menu( $args );

Adding to the menu items is not as easy. As far as I know, the only way to do this would be with a custom walker class, which is not as easy to do. Look down a ways on that documentation, you'll see an example for Using a Custom Walker Function. That' allows you to rebuild the menu with the exact markup you want.

Which might be easier to change your js selectors to match the default classes bootstrap gives. That same documentation gives you all the classes in all the scenarios that menu gets, and I've found it's often easier to change your class selector.

Kyle Arbuckle
Kyle Arbuckle
1,124 Points

Yes I was afraid of tackling the custom walker function. Just wondering if there was another way - it seems strange that WP wouldn't include this as a default feature considering the likelihood of a list element having a custom class.

Thanks Kevin