How to Add your own Logo in Thesis Theme?

by Arun on May 3, 2009

Ok, this is the post many users had asked for. Thesis, as we know, is one of the most wonderful themes around. But putting your own logo in the header is a bit tricky. You may find some tutorials for it, but they are all messy and would require a lot of programming knowledge. I will tell you how to achieve this easily.

Actually, there are two ways to do this. The first one is simple, but it won’t make the logo clickable. The idea is to put the logo as a background to the blog name value, so it can’t be linked to anywhere. The second one is less simpler (remember, I didn’t say difficult ) ,which overcomes this problem and I personally recommend it. Read on for both options.

Method #1 -

Go to your blog’s /wp-content/themes/thesis/lib/css/header.php file and locate #header #logo .

When you find it, just add these three lines into the class -

background-image:url('path_to_your_logo');

background-repeat:no-repeat;

height: height_of_your_logo

That’s it! Your logo should show up by now!

Method #2 -

Open /wp-content/themes/thesis/lib/functions/document.php and search for <p id="logo"><a href="<?php bloginfo('url'); ?>"></a></p> and give your image url in place of the blog name. So it looks like this-

<h1 id="logo"><a href="<?php bloginfo('url'); ?>"><img src="path_to_your_logo" /></a></h1>

Do the same for <p id="logo"></p>so it looks like this -

<p id="logo"><a href="<?php bloginfo('url'); ?>"><img src="path_to_your_logo" /></a></p>

That’s it! You’re done! You’ve just learnt the easiest way to put your logo in thesis theme. Let me know if it didn’t work, I’d love to see your thesis blogs. Send your Thesis related queries here, we will try to solve them.

Update: New method to add clickable logo in Thesis theme header.

Put following code in your custom.css file.

.custom #logo {background-image: url('images/logo.jpg'); background-repeat: no-repeat; width: 331px; height: 71px; text-indent: -9999px; } .custom #logo a {width: 331px; height: 71px; display: block; outline: none;}

Note – Change height & width values according to your logo size.

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

{ 20 comments }

Harsh Agrawal May 4, 2009 at 8:27 pm

Thanks for useful info.. Though I find it much easier to edit my custom.css and custom functions.css to make any changes.

salstabler February 16, 2010 at 10:36 am: How do you add your logo image to your thesis using custom.cc and functions.css?

Nihar May 4, 2009 at 11:24 pm

Have you purchased thesis theme? I heard a lot about this theme.

Is 87$ not costly?

Harshad May 4, 2009 at 11:27 pm: Yes, I purchased thesis theme for $87. Its costly, but giving good results. I’m really happy with Thesis.

Mayur May 4, 2009 at 11:30 pm

Thesis Open hook plugin is the best and easiest way to customize the thesis theme.

Harshad May 4, 2009 at 11:38 pm: Yes, I agree with you and am using it on this blog too.

Raju May 4, 2009 at 11:49 pm

Cool tip… You can come up with similar tutorials as and when you explore THESIS theme.

Harsh Agrawal May 18, 2009 at 9:00 am

Another thought. The method which you explained is effective but will create problem , when you will upgrade your Thesis…
It’s better to make changes using your custom function. I find this code on Internet

/* Custom Header Image */
function add_header_image () {
echo “

“;
}
add_action(‘thesis_hook_after_title’, ‘add_header_image’);

Harshad May 18, 2009 at 12:32 pm: Both the methods will create problem when we want to upgrade the Thesis theme. During this process, Thesis will put custom_sample folder instead of custom in theme’s folder.

But your method is also good, I’ll try it later on.

xphunt3r June 6, 2009 at 11:51 am