Adding the Bootstrap “active” class to a WordPress Menu Item

Working with WordPress and Bootstrap, you might be frustrated with the built in menu options. There isn’t an easy way to tell WordPress to swap out the  current-menu-item class with bootstrap’s active class. Fortunately for you and me, there’s jQuery for that. Just a little dab will do ya.

jQuery(document).ready(function () {
  $(".current-menu-item").addClass("active");
});

This little blessed bit of jQuery will add the active class to your menu on the fly.

Published by

Tim Bunch

Tim Bunch is a Web Designer and Social Media Specialist at CapEd FCU from Boise, Idaho. As a web standards fanatic, he passionately pursues best practices in web design. He also actively engages people on a wide range of topics in a variety of social media networks. Tim is also an avid Wordpress developer, music maker, coffee drinker, and child raiser. @timbunch

3 thoughts on “Adding the Bootstrap “active” class to a WordPress Menu Item”

  1. Works like a charm,

    Insert it in the header.php enclosed in , right after the tag

    jQuery(document).ready(function () {
    $(“.current-menu-item”).addClass(“active”);
    });

Leave a Reply

Your email address will not be published. Required fields are marked *