Title: Custom Menu Classes
Last modified: August 20, 2016

---

# Custom Menu Classes

 *  Resolved [Star Verte LLC](https://wordpress.org/support/users/starverte/)
 * (@starverte)
 * [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/)
 * When creating a custom menu, you can give a menu item a CSS class via the “CSS
   Classes (optional)” field. However, this adds a class to the `<li>` element, 
   and I want to add a class to the `<a>` element. How do I do this?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * (@vtxyzzy)
 * [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/#post-2502990)
 * I am curious why you can’t use a selector like
 *     ```
       li.myclass a {
       ```
   
 * to do what you want.
 *  Thread Starter [Star Verte LLC](https://wordpress.org/support/users/starverte/)
 * (@starverte)
 * [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/#post-2503016)
 * I am using it for creating a Modal Dialog window. I need to define for a particular
   link on a menu to open in a modal window instead of a new page.
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/#post-2503019)
 * Create a custom walker for wp_nav_menu and put it in your theme’s functions.php:
   [custom walker](http://pastebin.com/qdeCEms9)
 * Here in the walker I add a class to a nav_menu link to a Page with ID 108:
 *     ```
       // add a class to the link
       if($item->object == 'page' && $item->object_id == 108){
         $attributes .= ' class="my-custom-class-on-link"';
       }
       ```
   
 * For post links use $item->object == ‘post’ and the ID of the post.
 * categories: $item->object == ‘category’
    for tags: $item->object == ‘post_tag’
   custom post type: $item->object == ‘book’ (name you registered your post type
   under)
 * call wp_nav_menu() like this in your template files:
 *     ```
       <?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new My_Nav_Menu_Walker() ) ); ?>
       ```
   
 *  Thread Starter [Star Verte LLC](https://wordpress.org/support/users/starverte/)
 * (@starverte)
 * [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/#post-2503032)
 * That works too. I ended up doing
 *     ```
       function add_menuclass($ulclass) {
       return preg_replace('/<a rel="modal"/', '<a rel="modal" class="lbpModal"', $ulclass, 1);
       }
       add_filter('wp_nav_menu','add_menuclass');
       ```
   
 * and then specified the XFN Link Relationship for those links as “modal”
 * I understand your code, however am unfamiliar with the term “walker.” What does
   that refer to?
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/#post-2503033)
 * A walker makes use of the Walker class to output the HTML for functions as wp_list_pages(),
   wp_list_categories(), wp_nav_menu().
    [http://codex.wordpress.org/Function_Reference/Walker_Class](http://codex.wordpress.org/Function_Reference/Walker_Class)
 * Glad you got it resolved.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom Menu Classes’ is closed to new replies.

## Tags

 * [anchor](https://wordpress.org/support/topic-tag/anchor/)
 * [css-class](https://wordpress.org/support/topic-tag/css-class/)
 * [link](https://wordpress.org/support/topic-tag/link/)
 * [list item](https://wordpress.org/support/topic-tag/list-item/)
 * [Walker](https://wordpress.org/support/topic-tag/walker/)
 * [wp_nav_menu()](https://wordpress.org/support/topic-tag/wp_nav_menu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 3 participants
 * Last reply from: [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * Last activity: [14 years, 5 months ago](https://wordpress.org/support/topic/custom-menu-classes-1/#post-2503033)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics