WordPress.org

Ready to get started?Download WordPress

Forums

Add Class to Link in Custom Menu (6 posts)

  1. picard102
    Member
    Posted 3 years ago #

    I know you can add a class in the custom menu options, but it adds it to the LI before the A. I want to apply the class directly to this specific A rather then the whole LI.

    So instead of the output being
    <li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

    I want it too be like this.
    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

    Any ideas?

  2. pnaw10
    Member
    Posted 3 years ago #

    Hey, I was struggling with the same thing myself. I wanted certain menu items to carry a different text color. After tinkering for awhile and almost giving up, I found the following worked:

    li.NEWCLASS a {
    color: #ffffff !important;
    }

    If you want different colors for link, visited, hover, active, then you'd want to use this:

    li.NEWCLASS a:link {
    color: #ffffff !important;
    }
    li.NEWCLASS a:visited {
    color: #ff0000 !important;
    }
    li.NEWCLASS a:hover {
    color: #ff00ff !important;
    }
    li.NEWCLASS a:active {
    color: #0000ff !important;
    }
  3. pnaw10
    Member
    Posted 2 years ago #

    I should add, in case anyone else finds this topic via search, I am using the Atahualpa theme.

  4. Ryan Cowles
    Member
    Posted 2 years ago #

    I have run into the same problem. Pnaw, the solution you provided will definitely help in the case of styling, but for some cases you need to have the class applied to the anchor itself.

    For example, I am trying to implement a lightbox on one of my menu links. In order to do so, I need to apply a class to the anchor.

    I'll report back if I find anything!

  5. andrewayala
    Member
    Posted 2 years ago #

    Ryan, I want to add colorbox to a couple of my menu links as well. Has anyone found a solution? Many thanks.

  6. HahahaComedy
    Member
    Posted 2 years ago #

    SOLVED!!!! I needed to figure this out to make the menu item link to inline HTML in a fancybox. Paste the following code into your theme's function.php:

    function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a rel="fancybox" class="fancybox"', $ulclass, 1);
    }
    add_filter('wp_nav_menu','add_menuclass');

    Then... in the Menu tab of the WP Dashboard, create a custom link, add it to your menu. On the top where is says Screen Options, make sure you have "Link Relationship (XFN)" checked. It will add that field to your custom menu item. Type "fancybox" (without quotes) into the field and save your menu.

    The function looks for the call to the navigation menu, then finds wherever you have a rel="fancybox" and replaces it with a rel="fancybox" class="fancybox". You can replace fancybox with whatever class you need to add to your menu items. Done and done!

Topic Closed

This topic has been closed to new replies.

About this Topic