Here’s how you can keep that hover/active effect or highlight on the “Blog” link in your WordPress website navigation menu when the user is viewing a single blog post or a category/tag/search archive as demoed live on this very website.
<?php } ?>
How it works
The code checks if the page the user is on is either a single post or an archive (category, tag or search).
If true, using jQuery the li tag <li class="current_page_parent">…</li> containing the “Blog” link gets assigned another native WordPress navigation menu li class current-menu-item making the link display as active or highlighted, depending on how it was styled using CSS.
If false, the jQuery script is not executed.
Where to place it
Insert the code in your WordPress child theme‘s footer.php file right before the closing body tag </body>.
If you have no access to the theme files, you can embed the code right inside the post editor (you must be editing the post in Text mode) using a plugin that parses PHP code inside posts and pages. I use PHP Code for posts plugin on this website.
Do you know of an alternative method? Did the code work for on your website? Let me know your thoughts in the comments section down below.