active parent link and child link while on child page wordpress

Question

I am building this website where I have pages with child pages, when I click on the parent link in the navigation menu, I get redirected to that page. It will then display links to all its child pages on that page, my problem is that I want the parent page link in the navigation menu to always be highlighted even when I click on the child page link. So in the end both the parent page link AND the child page link should be highlighted.

I have tried some different things, but none seem to work, I can loop out all the child pages of the parent, but not make them highlighted.

    <?php

     if ( $post->post_parent ) :
       $parent = $post->post_parent;
     else :
       $parent = $post->ID;
     endif;

     $childpages = get_pages('child_of=' . $parent .        '&sort_column=menu_order');

     ?>

    <div class="row pad60">
     <ul class="category-nav column">
       <?php foreach( $childpages as $childpage ) { ?>

            <a href="<?= get_page_link( $childpage->ID ) ?>">
                <li><div class="primary-btn"> <?= $childpage->post_title ?> </div></li>
            </a>

     <?php } // End foreach ?>
   </ul>
</div>

This is what I am using right now, but I feel this isn't the right way to go in the first place..

Thank you!

Ginger Ginger · Accepted Answer · 2017-02-27T16:06:12

WordPress has a build in CSS classes to target the menus. https://developer.wordpress.org/reference/functions/wp_nav_menu/#Menu_Item_CSS_Classes

// This will highlight all the current menus
.current-menu-item a {
    color: blue;
    }

/* This will highlight its parent, when you are in its child page. */
.current_page_parent a {
    color: orange;
    }

active parent link and child link while on child page wordpress

1 Answers