How to keep “Blog” navigation link highlighted when viewing a single post

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 if (is_single() || is_category() || is_tag() || is_search()) {   //  displaying a single blog post or a blog archive ?>
    <script type="text/javascript">
        jQuery("li.current_page_parent").addClass('current-menu-item');
    </script>
<?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.

Published by

Bibiano Wenceslao

Father of one. Works from home. Interested about UX, social media, web trends, customer service, workflow automation, technology and life.

7 thoughts on “How to keep “Blog” navigation link highlighted when viewing a single post”

  1. Thanks for this handy snippet!
    FYI, depending on the theme being used, the added class may be different. For example on the site I’m working on, the class of the current/highlighted nav element is “current_page_item”.

  2. Just wondering why you’re mixing php and jQuery when the same thing can be achieved easily in either?

    I keep it all server side and use the php example straight from the WordPress Codex. If you add is_archive()… it takes care of the category and tag archive layouts as well.

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
    function special_nav_class($classes, $item){
         if(is_single() &amp;&amp; $item-&gt;title == "Blog" || is_archive() &amp;&amp; $item-&gt;title == "Blog"){ //Notice you can change the conditional from is_single() and $item-&gt;title
                 $classes[] = "blog_page_ancestor";
         }
         return $classes;
    }
    1. Hi Free – Thanks for the advice! My solution was originally intended for people who may not be able to edit theme files, so they can just put the code inside a text widget or the page/post content instead. I might be wrong though.

Leave a Reply