menus - set certain item in nav walker to active when on archive pages or singles

admin管理员组

文章数量:1022997

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.

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.

• menus
• navigation

Share Improve this question edited Apr 17, 2019 at 14:10 rudtek asked Apr 16, 2019 at 21:40 rudtekrudtek 6,38355 gold badges3030 silver badges5252 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 );

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.

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.

• menus
• navigation

Share Improve this question edited Apr 17, 2019 at 14:10 rudtek asked Apr 16, 2019 at 21:40 rudtekrudtek 6,38355 gold badges3030 silver badges5252 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 );

本文标签： menusset certain item in nav walker to active when on archive pages or singles