Menu: Adding class to a link

  • By default, when using the WordPress menu system to create a nav, it does not add a class to the a href. So adding a class in the menu maker adds it to the li but not the a. Which I need to make a jQuery function work. I tried this method of making the link relationship convert to a class but it’s not working for me. This is the code I’m using in functions.php

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

    What can I do to make my class add to the a elements besides the li?

Viewing 8 replies - 1 through 8 (of 8 total)
  • lisa

    (@contentiskey)

    you can add classes to the menu items.
    do you have the screen options turned on and the option selected for
    “Show advanced menu properties”
    no fancy coding required.
    have you used screen options before to control custom menus?

    Thread Starter databell96

    (@databell96)

    Yes, I do. I already did that but here’s the key. It adds it to the li. I want it on the a. So I want:

    <a class="close" href="#">

    and not

    <li class="close">

    lisa

    (@contentiskey)

    please provide link to website.
    what theme are you using?
    do you have a child theme set up?

    unless I am misunderstanding your intentions for the links in nav menu
    i would manage this kind of change via CSS—what is the change you are trying to get (font/color/size etc.) by using a the class?

    Thread Starter databell96

    (@databell96)

    I can’t provide a link. It’s a private site.

    However, I can provide you the jQuery I’m using to make the call. It’s looking for the class in the a href. If you change it to li, the function no longer works:

    <script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("body").on("click","a.close-con", function(){
        jQuery(this).parents("div#panel").animate({height: 0}, "slow" );
        return false;
    });
});
    Thread Starter databell96

    (@databell96)

    So a.close-con will work but li.close-con will not.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So are you saying you found the solution?

    You most likely need to look into using a custom Walker Class. A Walker Class will allow you to customize the exact output of your menu (in your case, adding in a class to the link).

    Here are a few resources on using a Walker Class:

    https://code.tutsplus.com/tutorials/understanding-the-walker-class–wp-25401

    https://github.com/twittem/wp-bootstrap-navwalker

    https://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

    It is a bit of a daunting to get into it at first, but once you experiment and get the hang of it, you’ll always have full control over your menu outputs.

    EDIT:

    Actually I just realized there is probably a much easier solution to your problem if you only need to add the class to certain links. If you first set a class on your li (.close-con) from the WP Admin Menu editor, why not modify your jquery code to this:

    jQuery("body").on("click","li.close-con a:first-child", function(){
    Thread Starter databell96

    (@databell96)

    No. I’m trying to show you what the solution should be.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Menu: Adding class to a link’ is closed to new replies.