WordPress.org

1. starverte
   Member
   Posted 4 months ago #

   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?

2. vtxyzzy
   Member
   Posted 4 months ago #

   I am curious why you can't use a selector like
   

   li.myclass a {

   to do what you want.

3. starverte
   Member
   Posted 4 months ago #

   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.

4. keesiemeijer
   moderator
   Posted 4 months ago #

   Create a custom walker for wp_nav_menu and put it in your theme's functions.php: custom walker

   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() ) ); ?>

5. starverte
   Member
   Posted 4 months ago #

   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?

6. keesiemeijer
   moderator
   Posted 4 months ago #

   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

   Glad you got it resolved.

Reply

You must log in to post.