Support » Fixing WordPress » using wp to change classes

  • <?php if($pagename == "engSub"){
      $class = "#engBody";
    } else {
    } ?>
    <body class="<?php echo $class; ?>">

    I am using the code above in the header.php to change the background image I set for the <body> tag.
    In the stylesheet I have the settings for it…#body{background:…..}
    however it isn’t working.
    can anyone advise please?

Viewing 14 replies - 1 through 14 (of 14 total)
  • Becuase <body> is a HTML tag, you don’t use anything in front of it to reference it in CSS. You’d just use:

    body {
        background: url('myfile.jpg');

    apreciate that, but that is not the issue.
    wp pages use the same header.
    the body tag is in the header. but i want page “b” let’s say to have a diff body background than page “a”

    Then set it up to use a class on the <body> tag.

    body {
       background: url('image1.jpg');
    body.index {
       background: url('image2.jpg');

    Oh… a tip for you too. don’t use #engBody as a class name. The # is a reserved CSS selector, so adding it to a class name is invalid and won’t work. Just use ‘engBody’ instead.

    cataustic that looks really interesting.
    but still not sure if it would work.
    right now i have

    page 1
    <body id=”mainBody”>
    in the css.
    <body id=”engBody”>
    in the css.

    unless I put the <style>info</style> css directly in the head of the header…how can i change the backgrounds…seem like my ids or the classes you mentioned are the same thing.
    and appreciate you mentining the # info.

    Classes and ID’s are similar, but not quite the same. The differences aren’t that important for this example so I won’t go to far into that.

    What you have looks fine (but remember that you should post all your code inside the code tags so that it’s formatted properly). BUT – you’ve spelt ‘background’ wrong. If you’re not seeing the background change, that’s why. The style definition doesn’t need to be in the header, it can be in the stylesheet as that still brings in the styles when everything’s rendered.

    body {
       background: url('image1.jpg');
    body#mainBody {
       background: url('image2.jpg');
    body#engBody {
       background: url('image3.jpg');

    ok…that was not my stylesheet css. that was me typing on the fly.
    & i know the diff between classes & ids.
    but the point I am trying to make…
    my <body> tag is in the header.php
    it doesn’t change as the pages change. hence page b has the same header and same background image as page a.
    That i what I am trying to change.

    Are you using FireBug or some other console to inspect the elements? If not, you should be. It makes life a whole lot easier when you’re trying to debug CSS issues like this.

    What you’ve given so far should work. There’s no reason hwy it won’t if you’ve done it the right way. Without a URL or something to check it’s going to be impossible to say anything more about it.

    well. thank you for trying to help…but you are really not reading my post.
    the css is fine. works fine on a static site where each page has its own header section.
    in wp several pages share the same header.php.
    the header.php only has ONE body tag.
    hence it only displays the background set for that tag on ALL the pages.

    Body tags typically contain page-specific classes – for example here’s one from a test site:

    <body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support ">

    So then you can use the class to target CSS to that page: {
     ...... ;

    If your body tags are not outputting those, see:

    Thank you WPyogi I went and checked it out.
    and I changed the stylesheet accordingly{
    background: #7db9e8; /* VERY Old browsers */
    background:url('imgs/engineeringLgBGround.png') no-repeat #7db9e8; /* Old browsers */
    background:	url('imgs/engineeringLgBGround.png')

    that still did not over ride background image, I tried changing the body tag in the header to <body> only, w/no styling and that did not bring about the new background for the specific page.

    & i have to had I am fairly new to wp. Can you help me tweak this code or have any other suggestions that could help please?

    <body <?php body_class(); ?>  id="mainBody"> <!-- start body-->
    <?php if($pagename == "engineering"){
      $class = "engBody";
    } else {
    } ?>
    <body class="<?php echo $class; ?>">

    It’s very hard to help with CSS without seeing the site. For starters, try using an absolute file path in that CSS.

    What does Firebug show?

    this is the site…
    when you go
    the main background image is supposed to change.

    actually i use chrome/inspect elements.

    the prob is that the header itself is static. the pages change. but the header that has the <body>tag calling in the background doesn’t

    Just noticed – your CSS above is invalid – body is a tag – not a class – so no period goes before that.{

    I don’t see that CSS on your site either.

    If you’re setting the class on the <body> tag with the standard WordPress functions like you should be, you’d be able to use this:

    if ($pagename == "engineering") {
       $class = "engBody";
    else {
        $class = "index";
    <body class="<?php body_class ($class); ?>">

    That will add your custom class name onto the other classes that WordPress adds by default.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘using wp to change classes’ is closed to new replies.