How to add the "current" class to navigation on custom post type pages
What I want to do
When setting up navigation with wp_nav_menu in WordPress,
wp_nav_menu( array('menu' => 'header') );I want to add "current" to the navigation when a custom post type detail page is open.
How to do it
How to create navigation
First, let's check how to create navigation.
If you have a custom post type called "Event Information" and want to add it to the navigation,
Add it to the menu from the "Event Information List" item.
When has_archive is false, "Event Information List" will not be displayed here, so please add it using "Pages" or "Custom Links."
In that case, please refer to the latter for the description to add to functions.php.
Add to functions.php
Add the following to functions.php.
// Add current to navigation on custom post type pages
function nav_current($classes, $item){
// Add current to navigation on custom post type pages
if($item -> type == 'post_type_archive'){
$post_tyle = $item -> object;
if(is_singular($post_tyle)){
$classes[] = 'current-menu-item';
}
}
// Add current to navigation on regular post pages
if($item -> title == 'News'){ // Change "News" as appropriate
if(is_singular('post')){
$classes[] = 'current-menu-item';
}
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'nav_current', 10, 2 );Let's say there is a custom post type with the slug "event."
Looking at the navigation li tags in order,
In line 6, $item -> object will contain "event"
In line 7, when the "event" detail page is open,
In line 8, the "current-menu-item" class is added to this li tag.
This is how it works.
Even if there are multiple custom post types, this single code can handle them all!
The latter part is the description for adding "current" to regular post pages.
Please change "News" in line 13 as appropriate to match the display name of the li tag.
In line 14, when "post" is open, the "current-menu-item" class is added.
This is how it works.
If successful, "current" should be added!
When "has_archive" is false
When has_archive is false,
I think you'll have to create the navigation using "Custom Links" or similar.
In this case, add the following to functions.php.
// Add current to navigation on custom post type pages
function nav_current($classes, $item){
// Add current to navigation on custom post type pages
if($item -> title == 'Event'){ // If the display name of the li tag is "Event"
if(is_singular('event')){ // When the event post page is open
$classes[] = 'current-menu-item';
}
}
// Add current to navigation on custom post type pages
if($item -> title == 'Work History'){ // If the display name of the li tag is "Work History"
if(is_singular('works')){ // When the works post page is open
$classes[] = 'current-menu-item';
}
}
// Add current to navigation on regular post pages
if($item -> title == 'News'){ // Change "News" as appropriate
if(is_singular('post')){
$classes[] = 'current-menu-item';
}
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'nav_current', 10, 2 );This is an example when there are two custom post types.
Event (event)
Work History (works)
You will need to duplicate the if statement each time a custom post type is added.
Comments
If you found something different in your environment, please feel free to comment.
If this was helpful, we appreciate your support!
Any support received will be used for childcare.
Or support us by buying something from the buttons below
(You don't have to buy the linked product.)
Amazon
楽天市場
Yahoo!ショッピング
PR