WordPress › Support » Add an extra body class?

ldexterldesign
Member
Posted 3 years ago #
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 (http://is.gd/28nAK). Just wondered how other people were doing it really?

Thanks,
L
ldexterldesign
Member
Posted 3 years ago #

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:
http://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/
http://perishablepress.com/press/2009/05/26/dynamic-body-class-id-php-wordpress/

Help would be much appreciated.

Thanks,
L
esmi
Theme Diva & Forum Moderator
Posted 3 years ago #

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

Frumph
Member
Posted 3 years ago #

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;
}

ldexterldesign
Member
Posted 3 years ago #

@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
ldexterldesign
Member
Posted 3 years ago #
@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">

</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
sergibosch
Member
Posted 3 years ago #
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.
Mark / t31os
Moderator
Posted 3 years ago #

View the source code on your given pages, that'll give you the classes.
sergibosch
Member
Posted 3 years ago #
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
t31os
Member
Posted 3 years ago #

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

That would be what the above suggests..
sergibosch
Member
Posted 3 years ago #

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!
Mark / t31os
Moderator
Posted 3 years ago #

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.
wordpress.org/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....
http://img31.imageshack.us/img31/3153/tempuf.jpg
sergibosch
Member
Posted 3 years ago #

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.
Mark / t31os
Moderator
Posted 3 years ago #

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 ..
darrinb
Member
Posted 2 years ago #

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:

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

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

Add an extra body class? (15 posts)

Topic Closed

About this Topic

Tags

Code is Poetry