How to Highlight Current Active Page Link Anywhere in WordPress [Ultimate Guide with Pictures]

If you want to add “active” class to any page link which is currently being visited in WordPress website, in other words, if you want to highlight the current active page link anywhere in your WordPress website or blog, then this tutorial is for you.

In this tutorial I will teach you, how you can highlight the current active page link anywhere in WordPress website, wherever you want.

Contents :

You can do it by adding some code (CSS & JavaScript) to your website.

So if you want to do it, just follow these steps.

Here I will apply it on sidebar links, but you can use it anywhere in your website.

Let’s Start

Step 1: Insert your links

First, add your links in the below format where you want, i.e. in post, page or widget.

<ul class="wpr-nav-links">
      <li><a href="#home">Home</a></li>
      <li><a href="#contact-us">Contact Us</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#privacy-policy">Privacy Policy</a></li>
    </ul>

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

Note: replace the links with your own.

Here I have added Custom HTML widget to sidebar and added my links to it as you can see in the screenshot.

Step 2: Add JavaScript code

Now we will add some JavaScript and CSS code to our activated theme.

To add JavaScript code, we will create ‘wpr-active-links.js’ file in our theme’s directory.

Note: we highly recommend you to create child theme for your website, otherwise your modifications will be lost after updating your theme.

There are three ways to create files and folders in your theme’s directory.

  1. Using Cpanel
  2. Using FTP
  3. Using WordPress plugin like WP File Manager

Here we will use the Cpanel method, for this go to your Cpanel » File Manager » Your website root directory » wp-content » themes » your activated theme

Create ‘assets’ folder, and inside it create ‘js’ folder.

Now create ‘wpr-active-links.js’ file inside ‘js’ folder.

Note: These folders (assets/js) may already exist in your theme, as in most themes, these folders already exist because this is a standard method.

Now edit ‘active-links.js’ file in text editor and paste the below code in it. And click on Save Changes button.

jQuery(document).ready(function () {
        var str = location.href.toLowerCase();
        jQuery(".wpr-nav-links li a").each(function () {
          if (str.indexOf(this.href.toLowerCase()) > -1) {
            jQuery("li.wpr-current-page-link").removeClass(
              "wpr-current-page-link"
            );
            jQuery(this).parent().addClass("wpr-current-page-link");
          }
        });
      });

Step 3: Enqueue the js file in our theme

While we created a new JavaScript file in our theme’s directory, so it is necessary to enqueue (connect) it in our theme, this is the rule of WordPress. If we want to work our JavaScript file, then we should enqueue it in theme’s functions.php file or in any site specific plugin.

So here we will enqueue it in functions.php file, go to Appearance » Theme Editor » functions.php

paste the below code in it and click on the update button.

function wpr_active_links()
{
  wp_enqueue_script('active-links', get_theme_file_uri() . '/assets/js/wpr-active-links.js', array('jquery'), '1.0.0', true);
}

add_action('wp_enqueue_scripts', 'wpr_active_links');

Step 4: Add CSS Code

Now we will add CSS code to our website, There are three ways to add CSS code in your website.

  1. Add CSS to any CSS file that is enqueued in your theme using wp_enqueue_scripts hook. like style.css etc.
  2. Add CSS in Additional CSS editor by going to Appearance » Customize » Additional CSS
  3. Add CSS to your website using any custom CSS plugin like WP Add Custom CSS.

Here we will use the second method. So go to Appearance » Customize » Additional CSS and paste the below code in it and click on Publish button.

li.wpr-current-page-link a {
        color: blue;
      }
      li.wpr-current-page-link a:hover {
        color: blue;
      }
      .wpr-nav-links a {
        color: #000;
      }

Final Result :

You are free to change the CSS class name or html tags according to you, but it is necessary to use the same tag and class names in both CSS and JavaScript code.

Now if you have any question, 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 *