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 Answer 1

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, 2019 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, 2019 at 19:05
  • I'll try them both when I'm back at work. thanks again.
    – rudtek
    Apr 19, 2019 at 15:15
  • I'm just wondering if the code worked for you, or perhaps you used another solution? :)
    – Sally CJ
    May 14, 2019 at 16:05
  • ack. I'll check today!
    – rudtek
    May 15, 2019 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.