How to Highlight Current Active Page Link in WordPress [with Pictures]
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 can you highlight the current active page link anywhere in WordPress website, wherever you want.
Here I will apply it in sidebar, but you can use it anywhere in your website.
Let’s Start
Step 1: Create a new menu
First of all create a new menu add add items to it.
![How to Highlight Current Active Page Link in WordPress [with Pictures] 2 create nav menu 1 - WebPlover](https://webplover.com/wp-content/uploads/2022/05/create-nav-menu-1-1024x425.jpg)
Step 2: Add menu to widget
After creating menu, now add it to your sidebar widget
![How to Highlight Current Active Page Link in WordPress [with Pictures] 3 add menu to sidebar - WebPlover](https://webplover.com/wp-content/uploads/2022/05/add-menu-to-sidebar-1024x408.jpg)
![How to Highlight Current Active Page Link in WordPress [with Pictures] 4 select nav menu - WebPlover](https://webplover.com/wp-content/uploads/2022/05/select-nav-menu-1024x323.jpg)
Our new menu is added in the sidebar, as you can see in the screenshot
![How to Highlight Current Active Page Link in WordPress [with Pictures] 5 widget in sidebar - WebPlover](https://webplover.com/wp-content/uploads/2022/05/widget-in-sidebar-1024x509.jpg)
Step 3: Add custom css
Now we need to add custom css code to style the current page link in the sidebar.
For this go to Appearance -> Customize -> Additional CSS or you can use any custom css plugin like Simple Custom CSS and JS
![How to Highlight Current Active Page Link in WordPress [with Pictures] 6 add custom css to wordpress - WebPlover](https://webplover.com/wp-content/uploads/2022/05/add-custom-css-to-wordpress-1024x460.jpg)
and paste this css code inside it, then click on Publish button.
.widget .current-menu-item a {
color: #28a745;
}
![How to Highlight Current Active Page Link in WordPress [with Pictures] 7 hightlighted current page link - WebPlover](https://webplover.com/wp-content/uploads/2022/05/hightlighted-current-page-link-1024x506.jpg)
You can add more css according to your need, to style the current page link.
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:
- How to Display Your WordPress Posts in Grid Layout
- How To Change The Footer Copyright Text Of Hestia WordPress Theme
- How to Add Website to Google [With Pictures]
If you find this article helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.