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

Posted by Tyler Groskreutz
Tyler Groskreutz
14,793 Points

Using wordpress/php to addClass to an nav item

I'm using ZURB's Foundation framework with WordPress and I need to add the class 'button' to the anchor tag. If I do under the menu options within WordPress, it adds the class to the list item. How do I add it?

So what is generated is shown figure 1-1

It is created by figure 1-2

and the desired output is to look like:

<h2>figure 1-1</h2>

<ul id="menu-main-menu" class="button-group even-4"><li id="menu-item-13" class="button menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-13"><a href="http://localhost/puppy_website/home/">Home</a></li>
<li id="menu-item-16" class="button menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://localhost/puppy_website/about/">About</a></li>
<li id="menu-item-15" class="button menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://localhost/puppy_website/adopt/">Adopt</a></li>
<li id="menu-item-14" class="button menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://localhost/puppy_website/contact/">Contact</a></li>
</ul>

<h2>figure 1-2</h2>

<?php

              $args = array(
                'menu'          => 'main-menu',
                'menu_class'    => 'button-group even-4',
                'echo'          => false
              );

              echo wp_nav_menu($args);

            ?>

<h2>figure 1-3</h2>

<ul class="button-group even-4">
<li><a href="#" class="button">Home</a></li>
<li><a href="#" class="button">About</a></li>
<li><a href="#" class="button">Adopt</a></li>
<li><a href="#" class="button">Contact</a></li>
</ul>

The WordPress classes are ok.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

You'll probably have to add your extra class via a filter. Give me a few minutes and I'll hook you up (no pun intended).

1 Answer

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Okay, try dropping this code into your functions.php and see if it works:

<?php // <--- take this out when you paste

function add_class_to_nav_items($nav_items, $args) {
  if ( $args['theme_location'] == 'MY_NAV_THEME_LOCATION' ) { // IMPORTANT: replace MY_NAV_THEME_LOCATION with the location of your menu
    foreach ($nav_items as &$nav_item) {
      $nav_item->classes[] = 'button';
    }
  }

  return $nav_items;

}

add_filter( 'wp_nav_menu_objects', 'add_class_to_nav_items', 11 );

Let me know if that works!

EDIT: Fixed the add_filter call not accepting two params.

EDIT 2: Attempted to fix again.

Tyler Groskreutz
Tyler Groskreutz
14,793 Points

I haven't done much learning on hooks and filters yet. So the syntax is a little unfamiliar, but structurally it looks like what I want to do. Do I need to replace the 'theme_location' portion of the IF statement as well? If so, do need the physical structure or could I use get_template_directory to do that?

When simply change the my_nav_theme_location to the class = 'menu-main-menu-container' of the div that the navigation UL lives within, I get "Missing argument 2 for add_class_to_nav_items() on line 10" which is the line the function declaration is on. Suggestions?

Also, thank you for your help on this so far!

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Sorry about that; I was hooking into the wrong filter and I think I passed a parameter that I didn't have to. I've corrected the code above, so try that and see if it works.