Blog

Clickable Logo in Header in Thesis

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

Update: As of Thesis 1.8, you can use the new Header Image option in the Thesis menu. In the admin area just go to Thesis > Header Image to upload your image. The way described below still works (and is what I do), but this new way will let you add a logo without editing code.

—

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/images folder.

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:

To redefine and clarify, yes it works – that is logo is clickable – but the clickable dimensions in Firefox and Safari have been reduced to the size and area of the header text only, not the dimensions of the logo, which oftentimes is larger if containing a tagline as part of the overall logo image file. Thanks for the quick reply earlier.

My humble apologies good sir, on reinvestigation of my css .custom #logo a , I had inadvertently sourced my custom #logo code elsewhere… and not from your blog. To all those who visit here, the above code on this blog works as stated for all browsers and the entire image is clickable. Save this code and seek no further… haha. Cheers.

Thanks for the tutorial. Made for an easy fix. I haven’t done this on very many sites since I started using Thesis because I usually just text-indent: -9999px; and forget about display: block; which makes the link work.

I miss the old days when everything was hand coded but I guess Thesis is about as close to manual control as you can get, especially for being built on WP.

Btw, I’ve never really thought about it but someone mentioned it above: will this affect any onpage SEO I’ve got going? I’d hate to screw something up over a small convenience alteration like this.

I’m not an SEO guy so I can’t say for sure, but my guess is that this does not affect SEO. Almost every website uses an image for a logo rather than straight text, and I can’t see why Google would penalize it.

Thanks for that code, good for the context of WordPress and Thesis. And, no, definitely no problem using this technique with Google. If one wanted one’s text indexed one would use a different technique such as a background graphic with cufoned text on top, or some such, but often one’s logo has to be all graphics because the text is too complex/difficult to render reliably. Google will treat your technique, as you say common, like it treats all graphics – which it is. Liked your bio too.

Cheers,
Adam Ring

Comments are closed.

Recent Blog Posts

I’m working on a project right now that includes a gallery of recent YouTube videos. I had assumed we could use an existing plugin for this. It seems like a common need, and YouTube has a straightforward API, so there must be a good plugin already. I tested about 5 popular plugins from the WordPress.org…

After completing Zac Gordon’s wonderful Gutenberg Development Course, I wanted to try building my own block. It was more difficult than I expected, but a great learning experience. I added a “List Subpages” block to my BE Subpages Widget plugin (code here). This lets you select a page and dynamically lists all its subpages. The…

As part of my recent site redesign, I wanted users to be able to “like” content without having to leave a comment, use social media, or have a user account. I think this will be especially useful for the Code Snippets section of the site which doesn’t have comments enabled. When viewing the Code Snippets…

Let’s Talk

Thanks for taking the time to contact me. Please send me some information on your project so I can determine how best to help you. After a few emails to confirm I’m a good fit, we’ll schedule a quick phone call to review the project and get to know each other.

Projects that include design and development typically start at $10,000.
Development-only projects start at $5,000.