I have created an event custom post type and a link in my menu to the archive page for that event (/events).
I'm using wp_nav_menu()
to call the menu.
When I'm on /events the menu has the current_menu_item
class and I've styled that to change colors. This works perfectly.
I'd like to enhance this a bit though by setting that menu item to active whenever anyone is on a certain page as well.
I created a page to show my past events (/past-events). It's being driven by a file called page-past-events.php
. The idea is that when a user is on /past-events
the events link shows as active. Since I don't have a menu item for that I want the event
menu item to have the active class. Ideally this item would be active when a user is on any of the single events as well (events/event-12).
my current code is
wp_nav_menu(array(
'theme_location' => 'headerMenu',
));
I found this code for my functions.php:
function my_special_nav_class( $classes, $item ) {
if ( is_page('past-events') ) {
$classes[] = 'current-menu-item';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
But it doesn't target my events menu item.
I can do it with script like this:
<?php if (is_page('past-events')) { ?>
<script type="text/javascript">
var d = document.getElementById("menu-item-15");
d.className += " current-menu-item";
</script>
<?php } ?>
But I was hoping for a "WordPress" way.
EDIT
/events
a custom link in the wp menu that links to the events archive.
The slug for events is events
/past-events
is a single page with its own template page-past-events.php
So if someone is on the past events page the menu item for /events gets the active class and for all intents and purposes is highlighted as active.