Home/ Questions/Q 8120959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T05:19:42+00:00

I am looking how to change a logo based on either class in the

  • 0

I am looking how to change a logo based on either class in the <body> or post type/page template.
I am not too knowledgeable with PHP if statements which I am guessing I will need to make this work.

I think what would work great is if I had all the logos in a sprite graphic and using a css class to change to the different logos for each page so the php would just change the class.

Something along like this?

if(body class="home") {
  <div class="logo1"><img src="images/logo.png" /></div>
} elseif(body class="page1") {
  <div class="logo2"><img src="images/logo.png" /></div>
} else {
  <div class="logo"><img src="images/logo.png" /></div>
}

I have not tried this code yet just want to know if this correct way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    iambriansreed answered well before me, and has provided a good answer but I want to expand on what he said, and I have more to say than will fit in a comment, so I am posting my own answer.

    In your HTML you would have a single logo element e.g. a div or an h1 tag:

    <h1 class="logo">My Company</h1>

    Then using CSS you would hide the text, and replace it with an image:

    .logo {
    background: url(mylogo.png) 0 0 no-repeat;
    width: 200px; /* match logo width */
    height: 80px; /* match logo height */
    text-indent: -9999px; /* hides text */
}

    I’ve shown one technique for hiding the text. There are other ways. The reason for leaving the text in the markup is for SEO and accessibility.

    On sub pages you would use a more specific selector, based on the class attached to your body tag, to alter the logo background:

    .section2 .logo {
    background: url(mylogo.png) 0 -80px no-repeat;
}

    PHP doesn’t come into the equation except to attach the unique class to the body tag based on which section/page is being rendered.

    • 0