Add a active link to custom ul in wordpress

1 Views

I have a custom list(ul) in wordpress sidebar. I want to add active class to list items. 

<ul  class="sidebar-list">
 <li> <a href="index.php/owle/">OWLE</a></li>
 <li><a href="index.php/sink-or-swim/">Sink or Swim</a></li>
 <li><a href="index.php/swim-and-survive/">Swim and Survive</a></li>
 <li><a href="index.php/vwsc/">VWSC</a></li>
 <li><a href="index.php/water-smart/">Water Smart</a></li>
 <li><a href="index.php/grey-medallion/">Grey Medallion</a></li>
 <li><a href="index.php/aquatic-pd-workshops/">Aquatic PD Workshops</a></li>

 <li><a href="index.php/edu-from-anywhere/">Edu From Anywhere</a></li>
 <li><a href="index.php/bronze-e-lifesaving/">Bronze e-Lifesaving</a></li>
 <li><a href="index.php/water-smart-award/">Water Smart Award</a></li>
  <li><a href="index.php/victorian-water-safety-certificate/">Victorian Water Safety Certificate</a></li>
 <li><a href="index.php/edu-from-anywhere-newsletter/">Edu From Anywhere Newsletter</a></li>
 <li><a href="index.php/edu-casual-instructor/">Edu Casual Instructor</a></li>

 <li><a href="index.php/grey-medallion/">Grey Medallion</a></li>
 <li><a href="index.php/sink-or-swim/">Sink or Swim</a></li>
 <li><a href="index.php/edu-instructor-of-year-profile/">Edu Instructor of year Profile</a></li>
  <li><a href="index.php/swim-survive-licensee-of-year/">Swim & Survive Licensee of year</a></li>
   </ul>


<li class="active"> <a href="index.php/owle/">OWLE</a></li>

should look like on ‘index.php/owle/’.

Post Views: 1

Related posts

3 comments

  1. Add this to your wordpress them’s custom javascript. Lot of themes have that. Check theme customization.

     var url = window.location;
 // Will only work if string in href matches with location
 $('sidebar-list li a[href="'+ url +'"]').parent().addClass('active');

 // Will also work for relative and absolute hrefs
  $('sidebar-list li a').filter(function() {
    return this.href == url;
 }).parent().addClass('active');

    if your theme don’t have this you have to hardcode this. I recommend you add this to your footer.php

  2. 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 ';  // your new class
 }
 return $classes;

    }

    Try this code, It Works. All you have to do is juss change those class names with the classes you are using.

  3. you no need to do coding for it.

    create sidebar with wordpress menu.

    wordpress menu have default class for currunt item

    current-menu-item

    and you can add css to it ..

Comments are closed.