How to keep parent page navigation link highlighted when viewing a child/sub page

It’s good UX when your users know where they are on your website just by looking at the navigation menu and seeing the page label highlighted or active. Better, knowing what main page they’re on while viewing a sub page.

In WordPress, most theme defaults doesn’t highlight the parent page e.g. yourwebsite.com/parent/ when the current page is a child or sub page of it e.g. yourwebsite.com/parent/child/.

As a demo, go to my WordPress Themes page bibiano.io/wordpress/themes/ and notice how the parent page navigation link WordPress bibiano.io/wordpress/ is highlighted.

Here’s the 5-line code snippet I used to solve that issue.

<!-- Highlight parent page link when on child page -->
<?php if (is_page()) {   //  displaying a child page ?>
    <script type="text/javascript">
        jQuery("li.current-page-ancestor").addClass('current-menu-item');
    </script>
<?php } ?>

How it works

The code checks if the user is on a page. If not e.g. on a single post or an archive, the conditional jQuery script doesn’t execute.

If true, the li tag <li class="current-page-ancestor">…</li> containing the parent page navigation 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.

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.

Did this method work for you? Did you come up with a different solution for your WordPress 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.

8 thoughts on “How to keep parent page navigation link highlighted when viewing a child/sub page”

  1. Is there a way to stop this code from triggering if you are on a viewport less than 600px, or any other viewport size?

    The code works but I would like to remove it on smartphones as it is not needed.

    Thanks

    1. Hi dt.k – Thanks for dropping by!

      I’m not very well-versed with PHP but a quick search on Stack Overflow reveals that while you can identify mobile devices to some extent, detecting a user’s screen resolution is not possible.

      If you are simply aiming to disable the style that comes with the “current-menu-item” class, you can instead use a CSS media query – for example:

      @media screen and (max-width: 375px) {
          .current-menu-item {
              /* insert new styles here to override the default */
          }
      }

      You can place that code at the bottom of your stylesheet.

      Let me know how it goes. Happy to help!

      1. I managed to figure out how stop the code from triggering on smaller viewports using the following code:

        jQuery("li.current-page-ancestor").addClass('current-menu-item');
               
                jQuery(window).ready(function($) {
                        $(window).resize(function() {
                                var wi = $(window).width();
         
                                if (wi <= 600){
                                        $("li.current-page-ancestor").removeClass('current-menu-item');
                                } else {
                                        $("li.current-page-ancestor").addClass('current-menu-item');
                                }
                        });
                });

        Unfortunately, it wasn’t what I was looking for so I decided to take your approach and alter the CSS using media queries.

        Thanks.

  2. I had a different issue, while being at a Portfolio item in WordPress I couldn’t get the parent url which is a Page to be active.

    So by inserting this code in the header.php (where #menu-243 is the parent):

    $(document).ready(function(){
    var str=location.href.toLowerCase();
    $(".main-menu li a#menu-243").each(function() {
    if (str.indexOf(this.href.toLowerCase()) &gt; -1) {
    $(this).parent().addClass("highlight");
    }
     });
     })

    And adding the class .highlight (with is the style) in my style.css I was able to sort out this issue!

  3. This is working perfectly on my site. Thank you so much!! Can you tell me how I might use this same idea to style the “home” link, when I’m on the home page? I can guess that it would involve changing is_page() to is_home(), but beyond that I’m not sure what I’m looking for in the CSS to target. The only difference seems to be that my other (non-home) menu items have an extra CSS class “menu-item-has-children”. Can I do some kind of “not” logic to isolate the home page, which does not have children?

    1. Hey Kalico –

      If I’m right, all standard WP themes should have a home class for the body tag. This means that you can simply use CSS to target any element present on the homepage e.g. the “home” link in your case.

      If your theme is using WP’s standard site navigation markup, you should be able select and style the “home” link by using the following CSS:

      .home .main-navigation .current-menu-item > a {
          /* your style attributes here */
      }

      Let me know how it goes and glad to help!

Leave a Reply