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 Developer from Boise, Idaho. As a web standards fanatic, he passionately pursues best practices. 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 to Asad Nadeem Cancel reply

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