Add Page Ancestor ID to Body Class

Incredibly handy function that I wish I found ages ago!

WordPress natively supports adding the class “parent-pageid-##” to child pages, but does not do so to ancestor pages. Thanks to TechTabby for putting this function together.

Place the code in your functions file. Class names can be updated based on preference.

Default Function from TechTabby:

add_filter( 'body_class', 'dc_parent_body_class' );
function dc_parent_body_class( $classes ) {
    	if( is_page() ) { 
        	$parents = get_post_ancestors( get_the_ID() );
			$id = ($parents) ? $parents[count($parents)-1]: get_the_ID();
		if ($id) {
			$classes[] = 'top-parent-' . $id;
		} else {
			$classes[] = 'top-parent-' . get_the_ID();
		}
	}
 
	return $classes;
}

Modification of Class name:

add_filter( 'body_class', 'dc_parent_body_class' );
function dc_parent_body_class( $classes ) {
    	if( is_page() ) { 
        	$parents = get_post_ancestors( get_the_ID() );
			$id = ($parents) ? $parents[count($parents)-1]: get_the_ID();
		if ($id) {
			$classes[] = 'ancestor-pageid-' . $id; // update the class name in the brackets
		} else {
			$classes[] = 'ancestor-pageid-' . get_the_ID(); // update the class name in the brackets
		}
	}
 
	return $classes;
}

 

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.