0

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.

1

If I understand it properly, this would do what you wanted:

function my_special_nav_class( $classes, $item ) {
    if (
        // 1. The menu item is for the "/events" page. Be sure to change the "123"
        //    (i.e. the "/events" page ID).
        ( 'page' === $item->object && 123 == $item->object_id ) &&
        // 2. The current page is "Past Events" or that it's a "Event" single page.
        //    If "event" isn't the correct post type, change it.
        ( is_page( 'past-events' ) || is_singular( 'event' ) )
    ) {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );

UPDATE

So if the /events menu item is a custom link:

function my_special_nav_class( $classes, $item ) {
    if (
        ( 'custom' === $item->type && 'events' === $item->post_name ) &&
        ( is_page( 'past-events' ) || is_singular( 'event' ) )
    ) {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );

If that does not work, then try checking against the menu item ID (here it's 456):

function my_special_nav_class( $classes, $item ) {
    if (
        456 == $item->ID &&
        ( is_page( 'past-events' ) || is_singular( 'event' ) )
    ) {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
5
  • Thanks for helping! This didn't seem to work though. You're correct: /events is a custom link that links to the events archive. I'll post a little more details in the question.
    – rudtek
    Apr 17 '19 at 14:13
  • Have you tried using ( 'custom' === $item->type && 'events' == $item->post_name ) ? And I've updated the answer, but if it still doesn't work, then maybe you can try wp_reset_query();?
    – Sally CJ
    Apr 17 '19 at 19:05
  • I'll try them both when I'm back at work. thanks again.
    – rudtek
    Apr 19 '19 at 15:15
  • I'm just wondering if the code worked for you, or perhaps you used another solution? :)
    – Sally CJ
    May 14 '19 at 16:05
  • ack. I'll check today!
    – rudtek
    May 15 '19 at 14:45

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .