Add an extra body class?

  • Hi guys,

    Simply, is there a definitive, easy, way to add a new body class in 2.8?

    I have accomplished it, but had to go into the post-template.php file in wp-includes, which isn’t ideal:

    // controls body class background colours
    if ($pageID == 7 || $wp_query->post->post_parent == 7){
      $classes[] = 'fmcg';
      }
    if ($pageID == 8 || $wp_query->post->post_parent == 8){
      $classes[] = 'corp';
      }

    I’ve come across a few tutorial posts like this one (https://is.gd/28nAK). Just wondered how other people were doing it really?

    Thanks,
    L

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter ldexterldesign

    (@ldexterldesign)

    OK, I’ve done some research and it seems I’d be better of using the body_class() with conditionals to generate the classes where I want them. Doesn’t anyone have any tips on doing this?

    There’s tons of blogs advocating the use of the body_class(), but none of them actually give any examples with conditional logic in? I’m not even sure where to drop my code? – in the header.php or in the post-template.php file?

    These two posts are the closest I can get ATM:
    https://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/
    https://perishablepress.com/press/2009/05/26/dynamic-body-class-id-php-wordpress/

    Help would be much appreciated.

    Thanks,
    L

    https://quirm.net/2009/08/07/changing-headers-with-wordpress-body_class/

    Found this bit of code I use to add a browser class to the body class, a good example of doing it.

    add_filter('body_class','browser_body_class');

function browser_body_class($classes = '') {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
    Thread Starter ldexterldesign

    (@ldexterldesign)

    @frumph – Cheers dude. I’ll have a gander at that this evening :]

    F*ck it:

    body[class*=”fmcg”] #s
    body[class*=”corp”] #s
    – A combination of CSS and greeeeeezy category naming to the rescue :]

    Thanks,
    L

    Thread Starter ldexterldesign

    (@ldexterldesign)

    @esmi Thanks for your link, but tell me how I’m supposed to chuck out an extra class on category pages depending on the categories listed on the page using any of that blog content you linked me to?

    I need to be able to use conditional logic to output another body class, but short of adding the following; not sure what other options I have:

    <body class="class1 class2...">
<div class="anyExtraClassIBuildMyself">
<!-- page content -->
</div>
</body>

    Got this in my post-template ATM. It’s got me this far:

    // controls body class background colours
		if ($pageID == 7 || $wp_query->post->post_parent == 7){
			$classes[] = 'fmcg';
			}
		if ($pageID == 8 || $wp_query->post->post_parent == 8){
			$classes[] = 'corp';
			}

    Cheers,
    L

    Hi, idexterldesign, frumph, and esmi:
    i’m having trouble understanding how to leverage the body_class function using css.

    My understanding is that in 2.8 and up, 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 and dropping the above css at the bottom of the style sheet)

    thank you for your help regarding this matter.

    View the source code on your given pages, that’ll give you the classes.

    hi, t31os_

    appreciate your advice. i just peeked at the code for my “about” page, after a clean install of kubrick. here is the class that is generated for the body of the “about” page:
    <body class="page page-id-2 logged-in">

    so, using the example code from my previous post, the css code becomes:

    body.page.page-id-2.logged-in {
	background:green;
	}

    it works! i’m psyched.

    new discussion point: i activated “permalinks”. i assumed that the new body class for my same “about” page would be:
    <body class="page about logged-in">

    however, it remains the same as before (page-id-2). hmmm.

    ALSO:

    i created a new page and titled it “contact”. the result was a much longer body class:
    <body class="page page-id-3 page-template page-template-default logged-in">

    what gives? why isn’t the body class for “about” the same as “contact” (excluding the page-id part)? why were these classes added:
    page-template page-template-default

    thanks

    Did you attach a page template to the contact page?..

    That would be what the above suggests..

    hi, t310s,

    i did not attach a page template to the contact page. i wonder if this would vary if i used a different theme. in this case i was using the default kubrick theme.

    btw, how do you keep up with these discussion threads? do you grab the rss from this page and create a folder in a reader? i need to modify my work flow so i can keep up with pages i comment on across the web. thanks!

    RE: Template
    I think that actually just refers to no template, ie. default..
    I’m not really sure what the body class is suppose to output, i don’t use it for anything i do.. (personally i’d say just look at the function, it’ll be far more revealing)

    RE: Tracking
    I use the profile page.
    www.ads-software.com/support/profile/1851967

    It’s not much good for thread tracking, but it’s better then the new profile pages which makes the task even more frustrating (imho – i’ve said this before though). I have applied some custom CSS to the old profile page to make it easier to spot replies though, which helps quite a bit….
    https://img31.imageshack.us/img31/3153/tempuf.jpg

    good stuff. i just bookmarked the thread page. i need to figure out rss readers better. i want to be able to know at a glance which comments have been replied to; you know what i mean? i comment on all over the web, and i’d like to keep better track of those comments. there’s probably some 2.0 tool out there i haven’t come across yet, that helps manage such a process.

    Yes i know what you mean exactly, i’ve been saying this for a while, the tracking really sucks on bbPress if i’m honest (i’m not mocking the work by the team, it’s a great app – just lacking in some areas)..

    I did have a go at re-writing bits of bbPress to make it better(thread tracking that is) when i had an install running, and let’s just say the bbPress code isn’t as friendly as WordPress, nor aswell documented, so i made very little progress… i’d applaud anyone who is able to improve the bbPress thread tracking though, it seriously needs it if any busy community wants to rely upon it and these forums are a prime example of that.

    If i were an avid bbPress user i’d happily spend some time learning the functions and familiarising myself with the core code (and write something for the job). It’s not really appealing to familiarise myself with and write code for something i don’t use though ..

    A bit late, but I recently wrote an article on this exact subject, how to customize the body class for WordPress posts/pages. You can check it out here:

    https://darrinb.com/notes/2010/customizing-the-wordpress-body_class-function/

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Add an extra body class?’ is closed to new replies.