Support » Themes and Templates » where to find body_class function

  • 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


Viewing 9 replies - 1 through 9 (of 9 total)
  • 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

    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


    then i want to use template2 class in the body tag

    if i use


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


    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


    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


    page class has one effect


    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

    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

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘where to find body_class function’ is closed to new replies.