Each page has more than 1 body class, couldn’t you just use one of those? There’s even page specific body classes. Here’s more info on the codex http://codex.ww.wp.xz.cn/Function_Reference/body_class
I already refered that body class link.
What i am trying to do is.
Apply different template for different pages. Eventhough i could create the template and run it successfully, unfortunately the body class function returns the
page class for pages
but , what i want is, if i use
template2
then i want to use template2 class in the body tag
if i use
template3
i want to use template3 class in the body tag
currently the body tag is generated like this
`<body class=”page page-id-194 page-template-default logged-in”>
which i want like
<body class=”template2 page-id-194 page-template-default logged-in”>
Try this in functions.php:
// Add specific CSS class by filter
add_filter('body_class','my_class_names');
function my_class_names($c) {
// add 'class-name' to the $classes array
is_front_page() ? $c[] = 'home' : null;
is_page('Foo') ? $c[] = 'foo' : null;
is_page(48) ? $c[] = 'bar' : null;
is_page_template('foo.php') ? $c[] = 'foo-template' : null;
is_404() ? $c[] = 'four04' : null; // CSS does not allow a digit as first character
// return the $classes array
return $c;
}
The add_filter() function is the key here.
Worked like a charm. Really a nice snippet
explaining to alter the css in variety of cases.
however, when i tried it the body class is altered like this
<body class="page page-id-432 page-template page-template-subpage2-php logged-in subpage">
if you see the intended subpage css class is appended at the end. Is it possible to make at the first like this
<body class="subpage page-id-432 page-template page-template-subpage2-php logged-in">
Thanks
Hmm, not sure how the order is created, or if it even matters in hierarchy. As far as I know, css doesn’t care about the order in the html declaration, it only matters in the .css file (the last value wins if the class declarations are identical or of equal precedence). So in the case of:
.page { color: black; }
.page {color: red; }
.subpage { color: blue; }
Absent any other declarations your body text color would be blue since the class subpage was declared last, and it has an equal order of precedence to .page in css heirarchy.
you are correct.
in my case hierarchy matters.
.page has a light gray background and height 200px
.page-template has a purple overlay with transperancy
—
my subpage class like this
.subpage has a light gray background and height 500px
so when the subpage is added at the end, the purple background color is overridden
thanks
So… it sounds like you got what you wanted then? Can’t quite tell from your response. What I’m saying is having subpage appear before page or page-template in the html body class output makes no difference to the css file that styles those classes.
If you are trying to override the page-template class for all pages using the subpage template you could target the generated class page-template-subpage2-php.
I nearly got what i wanted
currently
page class has one effect
then
page-template class adds additional effect to the background
(using bg image and transperancy)
when i use your snippet
sub page class at the end again overrides the page-template class
so only if i could generate the body tag like this, i can achieve what i want
<body class=”subpage page-id-432 page-template page-template-subpage2-php logged-in”>
Can you also help me with this thread
http://ww.wp.xz.cn/support/topic/creating-a-new-slider-template-and-including-it-in-different-page-templates?replies=1
thanks for helping me so much
It sounds to me like you are trying to style the body element with multiple background colors, which is not possible. Inside the style sheet, the last declared value (of highest precedence) will always prevail on an element, regardless of the order you list them in the html markup. So putting subpage before page or page-template in the html does not matter to the style sheet, but putting subpage before page in the stylesheet does matter.
What is possible is to have two elements that overlap with different background colors, like so:
<body class="foo">
<div id="bar">
some content
</div>
</body>
Now .foo and #bar can both take up 100% of the window, so bar sort of sits on top of foo. You can give foo a gray background and bar a purple background with your desired opacity, and foo will be visible thru bar because of the opacity. And you can nest any number of elements inside bar to get the effect you want.
