Add Parent Page Slug and Parent Template to WordPress Body Class

Add CSS body classes for the parent page on all child pages and the parent page template on of a WordPress site with this body_class filter. Ever need to style all child pages of a parent page in the same way or have you wanted to access every child page of a parent page via css selectors for styling? What about selecting all pages that are descendants of a page which is using a specific template?

body_classes_htmlBuilding large websites gets complicated, even in WordPress. Large sites usually mean there are many subpages and sections to the website that may need to be styled similarly. I’ve found it helpful to add a page’s parent page slug to the body class to allow me to alter or target the page or group of pages via css. By default the themes I’ve used have been generous in adding classes to the html body element for easy css selection rules. Things like the post slug, page template, logged in status, page vs post (or custom post type), post id, author… you get the idea. While half the time I don’t need half of this and the other half the time I find myself needing more.

Place this code into your functions.php file and your html body element will have a couple additional classes if they apply. It will have a class delineating the slug for the parent page on all child pages as well as a class delineating the template used by the parent page. This lets me apply styles to a whole sibling-section of a site pretty easily by just targeting the parent-slug on the body. Also adding the template of the parent in case I needed to use that.

post_parent_classesWalking through the code here we’re filtering the body_class function is how we are able to add this. We name our own function and give it a $classes parameter. Then throughout our function we can add classes to this $classes array and they will be output with the rest of the body classes. We need to hook into WordPress at the body_class function with add_filter and specify the hook and specify our own function to be called. In this case we grab the page properties of post_parent and the template of that parent. First set the post variable to reference the global scope, and then check to see if the post is a page with is_page. Then if the post object has a value for the parent (post_parent) we add the parent’s name to the classes array. Then we get the _wp_page_template meta data from the parent to find the template it’s using (if there is no template specified, then it returns default). This is added to our classes if it exists and then we return the classes array to the original body_class WP core function.

[cc lang=”php”]
// Body class adding page-parent
function cc_body_class( $classes ) {
global $post;
if ( is_page() ) {
// Has parent / is sub-page
if ( $post->post_parent ) {
# Parent post name/slug
$parent = get_post( $post->post_parent );
$classes[] = ‘parent-slug-‘.$parent->post_name;
// Parent template name
$parent_template = get_post_meta( $parent->ID, ‘_wp_page_template’, true);
if ( !empty($parent_template) )
$classes[] = ‘parent-template-‘.sanitize_html_class( str_replace( ‘.’, ‘-‘, $parent_template ), ” );
return $classes;
add_filter( ‘body_class’, ‘cc_body_class’ );

There are many more classes we can add to the body_class and like I said, sometimes you need more than what’s already provided and sometimes you need nothing. It all depends on the theme you’re using, what it provides and what your specific site and design require. What other classes have you wanted to see here? How have you filtered body_class to fit your site’s needs?

WordPress updates plugin directory

New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great!

I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins).

Embedded Link

Plugin Directory Refreshed
Been hanging out with a few hackers — Scott, Nacin, and Otto — the last few days in a BBQ-fueled haze of hacking to make plugin directory better. There are over 19,000 plugins listed a…

Short Head

Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to segment the audience and make sure you've got each audience covered and all their main needs. Then showcase the content that they need.

Every websites could benefit from this process. Every new site or redesign should start with this research and strategy. It does take time and effort, but it has the biggest return on investment in making an effective website. I still think redesigns are still needed, but slapping a new design on a bad architecture and structure benefits no one, especially the user.

Embedded Link

Stop Redesigning And Start Tuning Your Site Instead | Smashing UX Design
Let’s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

Google Embracing Responsive Web Design

Google showcases a few of their own sites that have become responsive here in their google webmaster blog post. They explain the need they had from watching their analytics and walkthrough some other decision made in going responsive!

Embedded Link

Responsive design – harnessing the power of media queries
Webmaster Level: Intermediate / Advanced

We love data, and spend a lot of time monitoring the analytics on our websites. Any web developer doing the same will have noticed the increase in traffic from mobile devices of late. Over the past year we’ve seen many key sites garner a significant percentage of pageviews from smartphones and tablets. These represent large numbers of visitors, with sophisticated browsers which support the latest HTML, CSS, and JavaScript, but which also have limited …

Responsive Images Recap

Here's another recap on the state of responsive images. This one from the Filament Group, who was involved in the Boston Globe redesign. It discusses their solutions and the problems with them and then the newly suggested picture html element and a call for the need of bandwidth detecting media queries. I'm still concerned about bandwidth detection. I think somehow there should be a setting that lets users decide if they want high res images (when supported) or the faster low res images. If I'm just browsing on a laptop tethered to a phone with 4g and paying for every kilobyte, I may not want to download a large image just because I can. I agree we need better ways to server appropriately sized images, but I don't want to force anything on a user. Although a popup asking them if they want every large image is not practical either… I'm glad this discussion is continuing though!

Embedded Link

The state of responsive images | Feature | .net magazine
Designer/developer Mat “Wilto” Marquis takes a look at the img tag, explains why a largest-size-fits-all approach to images is untenable and discusses different solutions in this ongoing saga