Custom Menu Classes
-
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?
-
I am curious why you can’t use a selector like
li.myclass a {
to do what you want.
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.
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() ) ); ?>
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?
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_ClassGlad you got it resolved.
- The topic ‘Custom Menu Classes’ is closed to new replies.