WordPress.org

Ready to get started?Download WordPress

Forums

where to find body_class function (10 posts)

  1. carrieathomer
    Member
    Posted 2 years ago #

    I am trying to add a new css class to my sub page body tag (name it .subpage)

    currently the body tag has the

    <body <?php body_class(); ?>>

    in the header

    In the css file i have added this .subpage class

    I am trying to add this class in the body tag for the specific pages that i want.

    How can i make this happen. I am unable to find the body_class function anywhere in the theme files.

    Any help to achieve this greatly appreciated

    Thanks

  2. zeaks
    Member
    Posted 2 years ago #

    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.wordpress.org/Function_Reference/body_class

  3. carrieathomer
    Member
    Posted 2 years ago #

    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">

  4. Gary Darling
    Member
    Posted 2 years ago #

    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.

  5. carrieathomer
    Member
    Posted 2 years ago #

    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

  6. Gary Darling
    Member
    Posted 2 years ago #

    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.

  7. carrieathomer
    Member
    Posted 2 years ago #

    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

  8. Gary Darling
    Member
    Posted 2 years ago #

    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.

  9. carrieathomer
    Member
    Posted 2 years ago #

    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://wordpress.org/support/topic/creating-a-new-slider-template-and-including-it-in-different-page-templates?replies=1

    thanks for helping me so much

  10. Gary Darling
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.