How to add active class to separate page link?

Question

I'm using the Wordpress Bootstrap theme as my base theme.

It uses the following code to add the class "active" to any links in the header if the user is currently on that page:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

    if($item->menu_item_parent == 0 && in_array('current-menu-item', $classes)) {

        $classes[] = "active";

    }

    return $classes;

}

However, I have multiple pages that I want to display as "active" when the user is not actually on that specific page. For example, users may sometimes be on "tutorials-by-topic" (Tutorials by Topic) but I want the link titled "Tutorials" to be displayed as the active link. I have four pages I want to do this way. I have tried different conditionals, etc. in the add_active_class function but I've had no luck. Any guidance? Thanks!

Answer 1

Not the cleanest solution, but I use something like this for a few instances of current page menu highlighting for pages that aren't child/parent related in any way:

<?php if (is_page('tutorials-by-topic') { ?>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-1319').addClass('current-menu-item');
}); });
</script>
<?php } ?>

You have to look at the source to get the correct menu-item-xxxx for the page that you want to highlight as current in the menu.

Answer 2

When using the nav menu, the parent menu item as well as the ancestor menu items are provided with the respective classes current-menu-parent and current-menu-ancestor. Those class selectors may be used for styling the links.

If you want to apply the exact same style the menu item with the active class has, just add the selectors to the particular CSS block in your stylesheet. Otherwise style them differently by means of new dedicated CSS blocks.