how to add active css class to a link in WordPress

2 comments

1. the code you provided is not WordPress it`s just something you added to your “header.php” but you can try something like this for it:

   $(function() {
     $('ul a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
   });
   

   if you have a default WordPress menu the active class in it is called “.current-menu-item” and if you want to change it’s name to let`s say “.active” find the file called “functions.php” and add this to it:

   add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
   function special_nav_class($classes, $item){
        if( in_array('current-menu-item', $classes) ){
                $classes[] = 'active ';
        }
        return $classes;
   }
   

   Log in to Reply

2. This is the most simple way to solve it. No javascript or anything than just WordPress

   Use it just using WordPress built-in boolean function

    <li<?php if (is_page('services')) { echo ' class="current_page_item"'; } ?>><a href="<?php echo home_url();?>/services">Services</a></li>
   

   here is the link from where i got this idea.
   http://www.vanseodesign.com/wordpress/hightlight-current-page-wordpress/

   Log in to Reply