I have uploaded a file as my main logo within the theme settings but would like a different logo on the main page. The theme I am using has a custom css option within the theme settings, can I use custom css to only change it on the front page and not the rest of the site?

Theme: http://demo.ghostpool.com/?theme=bounce-bp


4 Answers 4


It looks like the theme designer has a means for you to use a different logo on the homepage. Looking at your header.php on lines 83-93.

If your theme detects that this is the front page, the title is enclosed with an <h1> tag, otherwise it is enclosed in a <div>. Both have id='logo'.

If you can add custom css, you could use css image replacement to replace this <h1> tag with a different image on your homepage.


at header.php you can found this tags:

<div id="logo" style="">             
    <span class="logo-details">Bounce |   Example Homepage 1</span>
    <a href="http://demo.ghostpool.com/bounce" title="Bounce"><span class="default-logo"></span></a>                    

You just need access the a style-colorchoose.css at line 43 and change image path at class .default-logo, if you inspect using chrome developer tool you can find this class calling a logo from CSS using this class I mentioned.

Know if this theme offer a solution to change logo it's other way they cannot help you.

Contact me if you need a help.

  • Yes, the theme offers a solution to upload a logo which I have uploaded already. The problem I have is that i need a different logo on on only 1 page(homepage). I found a css file which references the themes colors and it shows this: /* Logo */ .default-logo { background-image: url(lib/images/logo-darkblue.png); }
    – user26480
    Commented Jan 24, 2013 at 18:15
  • But this action change a logo every pages. To change only to home, you need saw how class is applied to home, using a inspector at chrome you can saw all classes applied to body and using this you can add a exception adding line after default-logo this way: .classe-home-used .default-logo { background-image: url(http://yoursite.com/wp-content/uploads/2012/01/logo-onlyhome.png); } Commented Jan 24, 2013 at 18:25
  • That darkblue.png is the default logo for the theme, it was replaced when I uploaded a logo using the option in the theme settings. Here is the site: are.massideation.com
    – user26480
    Commented Jan 24, 2013 at 18:30
  • The .default-logo class only gets applied if you haven't specified an image in the theme options panel.
    – cpilko
    Commented Jan 24, 2013 at 18:30

There are many ways to do this. Let's go.

1. Just Header File

Open your header.php and find when logo is displaying and add conditional home tag. Something like this:

<?php if(is_home()) { ?>
<!-- your custom logo for home here -->
<?php } else { ?>
<!-- your theme logo function here -->
<?php } ?>

2. Using CSS Background Image

Open your header.php and go to tag. Add the body_class() function.

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

Now, you can customize any element on home with CSS. For Example:

body.home .default-logo {background-image:url(your-custom-logo-for-home.jpg) !important;}

You should be able to use vanilla CSS. I wasn't able to reach your site to give you the exact CSS. But, here's an example using the Twenty Twenty theme. All the WordPress themes I work with follow this pattern.

/* Twenty Twenty */

 * Hide the default logo. 
 * For posts use .postid-1 format.
.page-id-14 .custom-logo-link img {
    display: none;

 * Drop in a different logo.
 * The site link is respected.
.page-id-14 .custom-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;

Obviously change the page/post ID, logo URL, and logo dimensions to yours.

Here's how to get the page/post ID.

Shout if you have any questions :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.