Support » Fixing WordPress » Custom Menu Classes

  • Resolved Star Verte LLC


    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


    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.

    Moderator keesiemeijer



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

    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



    A walker makes use of the Walker class to output the HTML for functions as wp_list_pages(), wp_list_categories(), wp_nav_menu().

    Glad you got it resolved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom Menu Classes’ is closed to new replies.