Contents
WordPress menu functions (wp_nav_menu, wp_list_pages) automatically add current_page_item class to li containing the active link. So all we have to do is use the same class to highlight the current page.
Installation
- Upload the plugin files to the ‘/wp-content/plugins/’ directory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
- Set custom class name from ‘Settings’ -> ‘WP Add Active Class To Menu Item’ screen(optional)
How to highlight the navigation menu for the current page?
It’s very simple to implement to anything, navigation links, hyperlinks and etc. In your CSS document insert: This will make the hover state of the list items have red text and a white background. Attach that class of current to any link on the “current” page and it will display the same styles.
How to highlight a link in a list?
I want to be able to add a highlight to the link for the page you are currently viewing, but I have to do this all in one html snippet – so the code below preceeds the html list which is used for navigation. The list renders fine, except that I can’t get the current page to highlight (the ‘active’ tag only highlighting as you click the page).
The Javascript method checks the address of the current page and adds a class named “current” to any link on the page that matches whats in the address bar. You won’t see any visible change in the navigation yet.
1.) when sub menu is clicked, looking for new page to keep the selected sub menu open (i will highlight the selected sub menu button for further clarification on navigation) Do I need to put this script in the head section?