How To Highlight the Current Active Page Link in Sidebar

If you want to add active class to sidebar of your website, in other words, if you want to highlight the current active page link in the sidebar of your website or blog, then this tutorial is for you.

Because in this tutorial i will teach you, how can you highlight the current active page link in the sidebar of your website.

You can do this by adding custom code (Css & JavaScript) to your website.

If you’re using WordPress then you can add the code through plugin, otherwise you can add the code manually to your website.

So if you want to do this, then follow the steps.

Step 1:

First of all WordPress users download Insert Headers and Footers plugin, and activate it.

If you don’t know how to install WordPress plugin then read it, It will guide you to install WordPress plugin.

Step 2:

Download the below script, then go to settings → Insert Headers and Footers

and paste the script in ‘Script in Header’ section. Then save it.


Click here to download this script.

Step 3:

Install the PHP Code Widget plugin, then go to Appearance → Widgets,

and add “PHP Code” widget to sidebar.

Step 4:

Now add your links to sidebar in the below format.

 <ul class="side_b_nav">
<li><a href="https://www.webplover.com/add-active-class-to-sidebar/">Home</a></li>

<li><a href="https://www.webplover.com/add-active-class-to-sidebar/">Contact Us</a></li>

<li><a href="https://www.webplover.com/add-active-class-to-sidebar/">About</a></li>

<li><a href="https://www.webplover.com/add-active-class-to-sidebar/">Privacy Policy</a></li>

i.e., cover all your links by <ul> tag and give it side_b_nav class, then cover each link by <li> tag.

Now if the current visited link will available in your sidebar, it will be highlighted.

You can change the class name or tags according to you, but it is necessary to use the same tag and class name in both Css and JavaScript code.

Now if you have any questions, don’t hesitate to let me know through comment or email, i will try to help you.

Here are a few guides for you to read next:

If you find this article helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Leave a Comment

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