How can I add HTML classes for current taxonomy/term hierarchy into my pages to simplify styles?

Question

I've tried posting each of these questions to the Wordpress forum, but I'm not getting responses. Hopefully, someone here can assist me.

Question: Catgory/Subcategory Styling

I'm trying to style all the categories/subcategories headers to different styles based on the top level category. However, I can't figure out a way to style the subcategories without listing each individually. It currently looks like this:

#content .category-academy-awards .entry-byline,
#content .category-academy-awards-history .entry-byline,
#content .category-oscar-in-box-office-history .entry-byline,
#content .category-oscar-profile .entry-byline,
#content .category-this-day-in-oscar-history .entry-byline,
#content .category-for-your-consideration .entry-byline,
#content .category-screener-watch .entry-byline,
#content .category-oscar-preview .entry-byline,
#content .category-precursors .entry-byline,
#content .category-predictions .entry-byline,
#content .category-presenters .entry-byline,
#content .category-shortlists .entry-byline {
background-color: #c3a310;
padding: 5px;
border-top: 2px #e3c330 solid;
border-bottom: 2px #806b09 solid;
border-right: 2px #806b09 solid;
border-left: 2px #e3c330 solid;
}

#content .category-academy-awards .entry-byline a,
#content .category-academy-awards-history .entry-byline a,
#content .category-oscar-in-box-office-history .entry-byline a,
#content .category-oscar-profile .entry-byline a,
#content .category-this-day-in-oscar-history .entry-byline a,
#content .category-for-your-consideration .entry-byline a,
#content .category-screener-watch .entry-byline a,
#content .category-oscar-preview .entry-byline a,
#content .category-precursors .entry-byline a,
#content .category-predictions .entry-byline a,
#content .category-presenters .entry-byline a,
#content .category-shortlists .entry-byline a {
color: #402b09;
}

#content .category-academy-awards .entry-categories,
#content .category-academy-awards-history .entry-categories,
#content .category-oscar-in-box-office-history .entry-categories,
#content .category-oscar-profile .entry-categories,
#content .category-this-day-in-oscar-history .entry-categories,
#content .category-for-your-consideration .entry-categories,
#content .category-screener-watch .entry-categories,
#content .category-oscar-preview .entry-categories,
#content .category-precursors .entry-categories,
#content .category-predictions .entry-categories,
#content .category-presenters .entry-categories,
#content .category-shortlists .entry-categories {
background-color: #e3c330;
padding: -1px;
border-top: 1px #f3e350 solid;
border-bottom: 1px #806b09 solid;
border-right: 1px #806b09 solid;
border-left: 1px #f3e350 solid;
}

#content .category-academy-awards .entry-categories a,
#content .category-academy-awards-history .entry-categories a,
#content .category-oscar-in-box-office-history .entry-categories a,
#content .category-oscar-profile .entry-categories a,
#content .category-this-day-in-oscar-history .entry-categories a,
#content .category-for-your-consideration .entry-categories a,
#content .category-screener-watch .entry-categories a,
#content .category-oscar-preview .entry-categories a,
#content .category-precursors .entry-categories a,
#content .category-predictions .entry-categories a,
#content .category-presenters .entry-categories a,
#content .category-shortlists .entry-categories a {
padding: 4px;
}

Is there a way to set the style to the base ".category-academy-awards" and all subcategories, or is the above the only possible way to do it?

Answer 1

Note - I may need to edit this after you give me some feedback.

The trick here is to use either the body_class or post_class filters. Your theme (should) use the body_class function to inject a number of classes into your HTML tag and the complementary post_class function to do the same for whichever tag surrounds your main post content. Their filters let you expand those lists of classes with anything you need.

Since your CSS example has selectors like #content .category-academy-awards .entry-categories a I'm guessing that we are talking about post_class for your question. The two work exactly the same way.

In your functions.php file, start with this:

add_filter('post_class','wpse_235350_custom_body_class');

function wpse_235350_custom_body_class( $classes ) {

    return $classes;

}

Now when WP generates a page and hits the post_class function, it'll divert to this function, passing the list of classes, then the function returns the list of classes back and WP carries on, turning the array into a string separated by spaces and pushing it into the HTML of your page.

Nothing clever yet, but now we'll expand the function so that it adds to that list of classes.

I'm assuming that within the loop you want to find out for every post which categories it's in and then try and find the top level category for each of those and add that top level category to the list of classes. For example, if the post is in category predictions then we'll go up the tree to find the top level category is academy-awards and so add that as a class to the post.

In my own coding I'd probably condense things more than I'm going to here, and use fewer temporary variables, but that would make for a less clear answer.

First we need to know the categories of the post:

$categories = get_the_category();

This returns an array of category objects. We'll extract the category IDs from this array:

if( count( $categories ) ) {
// as long as there is at least one category...

    $catlist = array(); // good to make sure it really is empty to start with

    foreach( $categories as $category ) {
        $catlist[] = (int)$category->term_id;
        // WP gets stroppy if you accidentally fail to use integers, so we co-erce the value here.
    }

}

And now we'll use the really nifty get_ancestors to find all of each category's ancestors. get_ancestors will pull out a list of all the ancestors of a given object, whether that's a term or a post or a comment.

$fullcatlist = array();

foreach( $catlist as $category ) {

    $fullcatlist = array_merge( $fullcatlist, get_ancestors( $category, 'category' ) );

}

// now $fullcatlist is a one dimensional array of all the ancestors' IDs, possibly with duplicate values, so...

$fullcatlist = array_unique($fullcatlist);

Now let's get all the slugs. We get all the category objects and add the slugs to an array, putting the string 'category-' in front of each ready for our classes.

$catsluglist = array();

foreach( $fullcatlist as $category ) {
    $category = get_category( $category );
    $catsluglist[] = 'category-' . $category->slug;
}

And there we have it: A list of all the slugs of all the ancestor categories of the current post.

Putting it all together, we have this:

add_filter('post_class','wpse_235350_custom_body_class');

function wpse_235350_custom_body_class( $classes ) {

    $categories = get_the_category();

    if( count( $categories ) ) {
    // as long as there is at least one category...

        $catlist = array(); // good to make sure it really is empty to start with

        foreach( $categories as $category ) {
            $catlist[] = (int)$category->term_id;
            // WP gets stroppy if you accidentally fail to use integers, so we co-erce the value here.
        }

    }

    $fullcatlist = array();

    foreach( $catlist as $category ) {

        $fullcatlist = array_merge( $fullcatlist, get_ancestors( $category, 'category' ) );

    }

    // now $fullcatlist is a one dimensional array of all the ancestors' IDs, possibly with duplicate values, so...

    $fullcatlist = array_unique($fullcatlist);

    $catsluglist = array();

    foreach( $fullcatlist as $category ) {
        $category = get_category( $category );
        $catsluglist[] = 'category-' . $category->slug;
    }

    return $classes;

}

It's untested and I'm happy to help debug. Where's my glass of wine...

Oh - last bit. All of your posts should now have the class category-academy-awards on them, if that is the top level ancestor, as well as any intermediate ancestor categories.