how to add active css class to a link in Wordpress such that the active menu li will have different color when that link is viewed.
<ul>
<li class=""><a href="/news">News</a></li>
<li class="devider"> </li>
<li class=""><a href="/about">About Us</a></li>
<li class="devider"> </li>
<li><a href="#">Partners</a></li>
<li class="devider"> </li>
<li><a href="/vacancy">Careers</a></li> <li class="devider"> </li>
<li><a target="_blank" href="/webmail">Email Login</a></li>
</ul>
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/
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;
}