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 Daniel Santos
Daniel Santos
34,969 Points

Can I pass multiple classes to wp_nav_menu() ?

This is how my nav menu cose looks like. Maybe I didn't do a good writing it. 

<ul class="nav-ul">
                    <a href="<?php echo $home; ?>"><li class="nav-button-selected">
<p class="nav-link" >Home</p></li></a>
                    <a href="<?php echo $projects; ?>"><li class="nav-button<?php if($section == "projects"){echo "-selected";} ?>"><p class="nav-link">Projects</p></li></a>
                    <a href="<?php echo $products; ?>"><li class="nav-button<?php if($section == "products"){echo "-selected";} ?>"><p class="nav-link">Products</p></li></a>
                    <a href="<?php echo $contact; ?>"><li class="nav-button<?php if($section == "contact"){echo "-selected";} ?>"><p class="nav-link" >Contact</p></li></a>
                    <a href="<?php echo $about; ?>"><li class="nav-button<?php if($section == "about"){echo "-selected";} ?>"><p class="nav-link" >About Us</p></li></a>
</ul>

I have 3 classes the ul class = 'nav-ul' a li class = nav-button-selected a p class = 'nav-link'

1 Answer

Tim Rourke
Tim Rourke
12,151 Points
Tim Rourke
Tim Rourke
12,151 Points

Daniel,

You might benefit from simply using WordPress's built in navigation functionality. In principle, your approach would work fine if you were going to the trouble of managing your own 'current page' state, but WordPress does that by default quite nicely, and generates a navigational menu that is of excellent quality in terms of markup.

See https://codex.wordpress.org/Function_Reference/wp_nav_menu for more details on its use.

You can style current-page classes with this set of classes: https://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

There are other parameters you can pass to the WordPress function as well, like container classes, etc. You can certainly pass multiple classes into that function like this:

$nav_menu_args = array( 'container_class' => 'class1 class2 class3' );

<?php wp_nav_menu( $nav_menu_args ); ?>

If you wanted to pass classes to the individual item wrappers, you could use the 'items_wrap' parameter of that function.

Does that answer your question, or are you trying to accomplish something else?