ThemeShaper Forums » Thematic


How do you use dynamically generated CSS classes?

(20 posts)
  • Started 14 years ago by donna
  • Latest reply from teamA
  • This topic is not resolved
  1. I recently noticed that the ThematicPowerblog theme has dynamically generated classes in the body tag (perhaps elsewhere too?). I actually thought it was a bug when I saw all the text generated based on the tags, categories, date, browser type and version, and other properties of my post. I asked Ian about it and he said it was a "feature", not a bug. Okay.

    I understand how one could use these classes to apply different formatting to, say posts created according to year, or month or season. Or different formatting depending on the category, etc. But I can't think of too many actual, real world uses for this feature outside of that. And even those examples I can't really ever see myself using.

    So my question is... how do YOU use these dynamically generated CSS classes? If you do, that is. I'm looking for real world examples, or useful ideas that would have some benefit in real world cases even if you haven't actually implemented them.

    I'm looking to expand my way of thinking about it here because I can't see the point of this feature, I'd rather have clean code and lose the bloat. But I've noticed that several other themes seem to do this as well. Which makes me think I'm missing the usefulness of this feature. So let me know what cool things you are doing with these dynamically generated classes, or have thought of doing.

    Posted 14 years ago #
  2. Hey Donna,

    working on Thematic, providing code snippets for Thematic users and cleaning all kind of browser related issues I test a lot of scenarios with Thematic.

    One of the useful things is already included in the Thematic Power Blog Theme:

    /* uncomment the following two selectors in case your category list wraps into a second row
    #category-access {
    		height: 96px;
    body.ie7 #category-access {
    		height: 64px;

    Another useful example is How to remove the sidebar from a certain page? published on my blog.

    The second example is something I tested because of a support request.

    A while ago I saw a child theme based on Sandbox changing the header background and some text colors based on time using these body classes. The header graphics were all based on one scene illuminated by sunlight (sunrise, full daylight, sunset) and moonlight according to the current time.

    Hope this helps a little bit.



    Posted 14 years ago #
  3. Hi Chris, thanks for replying! I like your examples of removing the sidebar and making the content area wider on a forum or gallery. That does sound useful.

    I had thought of something similar to your example of the theme based on Sandbox, but seasonal images rather than time of day.

    In doing some more research it looks to me like this functionality dates right back to the Sandbox theme. But given that it's been around so long, and was incorporated into one of the most popular and used theme templates ever, it doesn't seem like many designers/developers are taking advantage of it. Given that, is it really worth having it? Maybe it's more prevalent than I think though, now that I know about it I will stay on the lookout for more examples of it.

    Otherwise, to over-ride this functionality so it doesn't appear in my child themes, would I have to override index.php, single.php and all the other templates that use it? Or is there an easier way, like just deleting a function in functions.php?


    Posted 14 years ago #
  4. Hi Donna,

    at the moment you could filter body_class to remove unwanted content. But before filtering it would be created anyway. Not a real option.

    Or you could remove the body_class thing from all template files. Not an option at all.

    Or you could live with it for a while. With the upcoming WordPress 2.8 which includes a similar body_class I need to change the code anyway. Doing this I can split up the classes into several categories like date based classes, author based classes and so on and make it switchable. So the generation of the categories of classes can be switched off.



    Posted 14 years ago #
  5. Okay, thanks Chris. That sounds good, being able to switch off the generation of classes, or to only have specific ones that I'm going to use being generated. I can't really think of much reason to use them. I'm sure there's the odd case of them being really useful, but for the most part I wouldn't need them. And I just hate having all that excess code to wade through.


    Posted 14 years ago #
  6. Hi Donna,

    the code changes are postponed and won't make it into the upcoming 0.95.



    Posted 14 years ago #
  7. Hi Chris,

    I tried to control the classes generated, which resulted in utter failure. I just simply don't want all of my page/post template information in the dynamic classes.

    Do you have any code I can place within my functions.php to individually remove certain classes? On that same token, is there any code I can put in functions.php to add *only* the top-level of the URI for posts/pages/etc.? I'm at a loss :(

    Thanks Chris!

    Posted 13 years ago #
  8. I just used these body classes to have significantly different layouts for pages vs. the blog section of the site I'm working on. Worked like a charm. Was really glad to have that ability.

    Granted there a lot of tags on the Body I can't really see myself using, but I also don't really see any downside to them being there? Am I missing something?

    Posted 13 years ago #
  9. If you want to have very specific class names for pages/posts/category/archive instead of using something like 'slug-contact' you could use 'contact' for the body class for the "Contact" page.

    Posted 13 years ago #
  10. Hi,

    with the current version you can filter the content of the body class using str_replace() or preg_replace() .. I might integrate a master switch and a couple of group switches.


    Posted 13 years ago #
  11. .. I might integrate a master switch and a couple of group switches.

    Granular filters/actions for turning some of these classes on and off is high on my wish list for thematic. I've been removing this and replacing with my own body, post class functions since my adoption of thematic and these are my main reasons:

    1. Trivial but all that clutter in the source makes it visually difficult to write and debug css for specificity.
    2. The Author Classes- An issue of security: I help with a handful of small nonprofit's WordPress sites. And I remove the author meta and dynamic classes on all of their sites. Why? It's ridiculous but all of them have the admin user enabled and never have changed the author name -- or -- if other users have been created it's usually a plethora of interns or staff members who are temporary at best.
      I do it to avoid advertising the security risk in the source and reduce the internal clutter.
      It's easier to do this from the get go than to push the how to declutter and secure you website conversation more than once. In my experience with this they don't to afford hardened security practices until they've been hacked. Don't even get me started on trying to get them to keep up with WP's upgrade cycle.
    3. The category classes: often for lack of better support for custom post types( cant wait for wp 2.9) I resort to using custom queries and categories to group category posts on pages instead of in a category archive. I don't think I'm the only one out here doing this. So in this case categories become the inner workings of the CMS that I'm developing and as a result I really don't want to advertise these methods in the code.
    4. comments-open/closed and pings: most of the organizations I'm working with are running WP as a lite CMS and typically turn off comments site wide by default so the comments bit in the body class again is just pointless
    5. Tags : Have you ever seen the body class on a post where the post author went tag crazy? It's not pretty.

    I know it's likely more complex than this but I'd love to see these dynamic classes (including body and posts excluding the comment class function) compartmentalized into groupings similar to this:

    1. generator class (i.e. class of 'wordpress')
    2. the standard generic classes
    3. Time & date
    4. Post, Page,Single, Attachment,Taxonomy & Category Template: id's & slugs etc
    5. Author classes (on pages and posts)
    6. Tags and Category classes (on pages and posts -- not archives)
    7. Comments & pings (on pages and posts)
    8. Browser Classes ( oh, i love 'em!! )

    I don't think I'm alone on this one just the only one talking about it. So if anyone stumbles on this and has an opinion either in support or criticism of this please join the conversation.

    The work that's been done is tremendous and thanks for that. I've been secretly hoping that by occasionally helping out around the forums, I'll free up time for those with the ability to refine these things.

    Special thanks to you Chris for considering our questions, desires and working on this framework. I am much obliged.

    Posted 13 years ago #
  12. Hi Gene,

    thanks a lot for your help! :)

    Let me finish the new widgetized area functionality - still need to tweak the footer - and I'll start this part.

    The idea is to provide a switch and a filter for each group. The switch will prevent the creation completely and save some time.


    Posted 13 years ago #
  13. Any news on this?

    Posted 13 years ago #
  14. Currently working on this!


    Posted 13 years ago #
  15. That's good to know :) Sehr gut, danke.

    Posted 13 years ago #
  16. Ok .. the first filters are ready to be tested:

    thematic_show_bodyclass -> add a filter and return FALSE to switch off the bodyclass

    thematic_show_bc_wordpress -> add a filter and return FALSE to switch off 'wordpress'

    thematic_show_bc_datetime -> add a filter and return FALSE to switch off the generic date / time classes

    thematic_show_bc_singular -> add a filter and return FALSE to switch off 'singular' / 'not-singular'

    thematic_show_bc_singlepost -> add a filter and return FALSE to switch off all single post classes

    thematic_show_bc_authorarchives -> add a filter and return FALSE to switch off the author archive classes

    thematic_show_bc_categoryarchives -> add a filter and return FALSE to switch off the category archive classes

    thematic_show_bc_tagarchives -> add a filter and return FALSE to switch off the tag archive classes

    thematic_show_bc_pages -> add a filter and return FALSE to switch off classes for pages

    thematic_show_bc_search -> add a filter and return FALSE to switch off the search classes

    thematic_show_bc_loggedin -> add a filter and return FALSE to switch off 'loggedin' / 'not-loggedin'

    thematic_show_bc_pagex -> add a filter and return FALSE to switch off the Page x classes

    thematic_show_bc_browser -> add a filter and return FALSE to switch off the browser classes

    That's it for today :) .. these are the generic things, the grouped stuff will follow next week.


    Posted 13 years ago #
  17. Btw. .. these filters will prevent the creation of the information. Using these filters, in case that you don't need a certain body class to style your blog, will speed up your blog.


    Posted 13 years ago #
  18. Thompson

    Hey Chris, Are there any new filters that might address these body classes?:

    page-author-xxxx page-comments-open page-pings-open

    Posted 12 years ago #
  19. In order to improve performance you want avoid generating unnessesary classes. Makes sense.
    So, you created filters to switch them off.
    Yet, in the current version some classes seem to be switched off by default. - Fixed behaviour of thematic_show_bodyclass. The body tag will now be created, if a filter returns false.
    I tried swithing it on like this

    function childtheme_show_bc_singular(){ return false; }
    add_filter('thematic_show_bc_singular', 'childtheme_show_bc_singular');

    but that did not work.
    Now I temporary fixed it like this

    function restore_bc_singular(){
    // Special classes for BODY element when a singular post
    if ( is_singular() ) {
    $c[] = 'singular';
    } else {
    $c[] = 'not-singular';
    return $c;
    add_filter('body_class', 'restore_bc_singular');

    Can you show me the proper way?

    Posted 12 years ago #
  20. @miochat -

    I'm not sure if you found a solution - or that I necessarily understand your question. With those caveats understood, there are a few items of note I found when playing with this.

    When I used your code as a jumping off place and ran into some issues.

    First, make sure you've turned on Thematic's body class and post class:


    Then you should see all kinds of extra information in the body class, maybe too much. From there you can use the filters listed above to turn off items with a return FALSE action.

    I needed to add some items to the body class (parent categories) and I used the thematic $c{} structure in my function. This wiped out all of the other information in the array, so only my parent category was listed. Not ideal. Only be creating my own array of variable was I able to get the body class to print all of the thematic information, as well as my own.

    Hope that helps.

    Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.