One of the most common modifications to the Thesis theme is replacing the header text with your own custom logo or image. What a lot of people forget to do is add a bit more code to make that logo clickable.
- First, upload your logo to the
/custom/imagesfolder. - Go to Thesis Options, and click “Header” under Display Options. Make sure “Show site name in header” is selected (it is by default).
- Open custom.css, and paste the following code. Make sure you change the height and width to match your logo’s dimensions:
.custom #logo {background-image: url('images/logo.jpg'); background-repeat: no-repeat; width: 170px; height: 145px; text-indent: -9999px; }
.custom #logo a {width: 170px; height: 145px; display: block; outline: none;}
That second line is what a lot of people forget. If you don’t include it, you’ll have the logo up there but it won’t be clickable. Now, when someone clicks it they are sent to the homepage.
And that’s it!
All Thesis Tips:- Adding “nofollow” to Category Links
- Thesis Tip #18 – Full Width Navigation
- Thesis Tip #17 – Adding Content Between Posts
- Thesis Tip #16 – Redirect Pages
- Thesis Tip #15 – Custom Author Pages
- Thesis Tip #14 – Add Related Posts Before Comments Link
- Thesis Tip #13 – Using Gravatars in WordPress
- Thesis Tip #12 – Adding Custom Headers to Category Pages
- Thesis Tip #11 – Clickable Logo in Header
- Thesis Tip #10 – Filter Categories from Homepage
- Thesis Tip #9 – Custom Options Page
- Thesis Tip #8 – Change Next and Previous Post Text
- Thesis Tip #7 – Import and Export Your Design
- Thesis Tip #6 – Print Stylesheets
- Thesis Tip #5 – Featured Content Rotator
- Thesis Tip #4 – Adding Classes to Body
- Thesis Tip #3 – Multiple content areas
- Thesis Tip #2 – Additional Sidebars
- Thesis Tip #1 – Custom Images and Category Pages
Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis or Genesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).

{ 6 comments… read them below or add one }
Hi there
Thanks for this, got my logo up and dispalying!
Won't this detract from a site's SEO? I'd prefer to be more creative with my header than the default text, but I don't want to discourage my page rank either.
Ohh… that's what the -9999px text-indent is about, sliding the text out of view? And Google's not wise to that technique?
How would I insert a header that is an iframe. It is linked to my search site.
Here is the target for the iframe:
http://www.uberrealty.com/main.mvc/embeddedsearch
Code is:
<iframe width="100%" height="100" frameborder="0" scrolling="no" src="http://www.uberrealty.com/main.mvc/embeddedsearch>
</iframe>
Just at the end of the page?
Jim
Perfect. Thank you!
{ 2 trackbacks }