As from Wordpress version 2.8, the body_class function opened up a great arsenal of location specific classes. But of course, not everything is included here.
When you look at the page structure of a Wordpress installation, it’s nice to know which is the top parent page. For example, you want to decorate every page and all it’s children with a different background.
There’s are several classes present on subsubpages:
- page-id-3
- page-parent
- page-child
- parent-pageid-2
The function
But when we look at the subsubpages, the parent page ID is that of it’s nearest parent and not the ID of it’s top level parent.
You can easily extend the body_class function with this ID by adding following function in the functions.php of your current theme:
add_filter('body_class','top_level_parent_id_body_class'); function top_level_parent_id_body_class($classes) { global $wpdb, $post; if (is_page()) { if ($post->post_parent) { $parent = end(get_post_ancestors($current_page_id)); } else { $parent = $post->ID; } $classes[] = 'top-level-parent-pageid-' . $parent; } return $classes; }
Don’t forget to include the body_class function, if it’s not present already.
And when you check the subsubpages again, you’ll find a class like top-level-parent-pageid-1
But, wait…
Now, there’s a little bug in the 2.8.4 version (and versions below). When using the get_post_ancestors function, sometimes you will get an empty array. To fix this, you will have to pop up the hood and look into wp-includes/post.php and add the code you’ll find here.
Credits
Thanks to Alen Grakalic for a snippet of code that makes this work.
[...] to Mr Henry for this very cool recipe! If you enjoyed this article, please consider sharing it! [...]
[...] 参考：英語サイト Extending the Wordpress body_class function with the top level parent ID [...]
Hi, i’m having trouble understanding how to leverage the body_class function using css.
My understanding is that in 2.8 +, the body class is dynamically generated. So if my page is titled About, and my blog page is titled News, the classes .about and .news will be generated.
if that is the case, i would assume the following css would work – but it doesn’t:
body.about {background: orange;}
body.news {background: red;}
what am i doing wrong? why doesn’t this css work (note: i’m using a clean kubrick theme install)
thank you for your help regarding this matter.
Hi Sergi,
what you are trying to do is not possible with the normal function. Try to look into your source code and see what body classes are generated for that specific page. Normally you should find something like “postid-2893″, that’s the one you need.
If you still having trouble, shout and we’ll dive in deeper
It took me awhile to find something like this, so I was quite glad to find this post. However, I’m not having success. I have gone to the header.php and made sure to change the to <body >
I then went to style.css and added the following style for my about page:
.page-id-2 {
background: #FF3366;
}
I then added your code in my function.php
Yet, my mission page, a subpage of About doesn’t carry pull the same background color. I’m using the “default” theme for testing purpose and running WP 2.9.1
Any advice?
Hi MrX,
try using this class “top-level-parent-pageid-2” instead of “.page-id-2“.
If that doesn’t work, send a link of your blog so we can explore this to the bone.
Well, you just made my day! =)
That worked great. Thank you so much!