X

Add Ancestor Class to Single Posts

Snippets by IsItWP

Do you want to add ancestor class to single posts? When you open a single post page (i.e. single.php), you don’t get any current_page_item or current-page-ancestor classes on your wp_nav_menu. You can’t also tell your users in which section they currently are.

Instructions:

All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:

<?php
function add_single_post_ancestor_nav_class($classes, $item){
    global $post;
    $is_ancestor = false;
    if ( is_single() ) {
        if ( $post->post_type != 'post' ) {
        	// Checks if the custom-post-type label name matches the title of the nav-page-item
        	$post_type_obj = get_post_type_object($post->post_type);
        	$post_type_labels = $post_type_obj->labels;
        	$post_type_name = $post_type_labels->name;
        	if( $item->title == $post_type_name ) { $is_ancestor = true; }
        }
        else {
        	// Checks if one of the single-post categories matches the title of the nav-page-item
        	$categories = get_categories();
        	foreach ( $categories as $category ) {
        		if ( in_category($category->name) && $item->title == $category->name ) { $is_ancestor = true; }
        	}
        }
        if( $is_ancestor ){ $classes[] = 'current-page-ancestor'; }
    }
    return $classes;
}
add_filter('nav_menu_css_class' , 'add_single_post_ancestor_nav_class' , 10 , 2);
?>

If the generic name in the labels don’t match the title of the page, then it won’t add the class.

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: 7 best VPN services for WordPress users and 12 best WordPress podcast plugins.

[code]post_type != 'post' ) { // Checks if the custom-post-type label name matches the title of the nav-page-item $post_type_obj = get_post_type_object($post->post_type); $post_type_labels = $post_type_obj->labels; $post_type_name = $post_type_labels->name; if( $item->title == $post_type_name ) { $is_ancestor = true; } } else { // Checks if one of the single-post categories matches the title of the nav-page-item $categories = get_categories(); foreach ( $categories as $category ) { if ( in_category($category->name) && $item->title == $category->name ) { $is_ancestor = true; } } } if( $is_ancestor ){ $classes[] = 'current-page-ancestor'; } } return $classes; } add_filter('nav_menu_css_class' , 'add_single_post_ancestor_nav_class' , 10 , 2); ?>[/code]

Comments   Leave a Reply

  1. Can you put the code on this page? I can’t see it…

    1. Updated!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!