0

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?

  • Your first question seems to be CSS related. have you tried some custom PHP to add some CSS class to the category/categories you are trying to style? Your second question is too vague. again have you tried some specific PHP code and you are having issue or are you asking us to provide you with some code to achieve what you want? WP has get_the_title(), get_the_post_thumbnail(), etc. and other similar functions that would help you achieve what your are trying to do (assuming I understand what you are asking correctly) – bynicolas Aug 8 '16 at 19:16
  • Is this on a single post? On a category archive? Where it is and which functions you are using to generate your classes will matter. – Andy Macaulay-Brook Aug 8 '16 at 19:25
  • On the first question, I'm looking primarily for a css answer. The code I posted is for each individual category and subcategory rather than for a single category that feeds to all subcategories. I'm not sure it's possible to do that. – OscarGuy Aug 8 '16 at 20:22
  • On the second question, what I'm looking to do is redesign my main page so that the upper portion is broken into four sections, top left, top right, bottom left and bottom right. Each of these will be the image of the most recent post in specific categories overlaid by a link to the most recent post. Then, with each of these is a list of the next two posts in the category. The formatting is done through CSS, which I can handle, but I don't know how to pull posts from specific categories and how to pull only the most recent three. – OscarGuy Aug 8 '16 at 20:23
  • Hi OscarGuy, welcome to WPSE. Firstly, these seem to be two distinct questions, and would probably be better served being separated as such. I'd recommend editing this question to focus on one of them, then reposting the other one. Use the information you've given in the comments here to clarify in the question body. You should also know that we don't do 'specific CSS' questions here, so if you're after a CSS answer you can ask at StackOverflow. However, we can certainly help with the WordPress side; solutions might involve adding your own classes server-side. – Tim Malone Aug 8 '16 at 20:31
0

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.

  • I appreciate the in-depth explanation. That's a lot of code to avoid having to style sub-categories individually. I was hoping for a simple solution, but I guess in coding there are no simple answers. – OscarGuy Aug 13 '16 at 13:29
  • That's not much code :-) Any task that involves moving up and down a hierarchy extracting the data you really want does take a little more than a couple of lines. – Andy Macaulay-Brook Aug 13 '16 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.