May

2009

The absolute easiest way to add your own header image

A lot of people read this and said “It’s not clickable”. And they’re right. This tutorial is to show you how to simply add your own custom image to your header area. It says nothing about making it clickable. I wrote another tutorial on a simple way to make your own custom “clickable” header image. Click here to read the entire tutorial.

I wrote a tutorial about 6 months ago showing how to add a custom image to the header. Since then, new Thesis versions and upgrades have been released. Functions, hooks, and css selectors have been changed. The latest version of Thesis is so much more streamlined than it was 6 months ago. The older tutorial still works fine, but it is overkill.

Here’s the easiest way to insert your own custom header image…

First, get rid of the default header by putting this in your custom_functions.php file…

remove_action ( ‘thesis_hook_header’,'thesis_default_header’);

Next, make sure your new header image is in the correct folder…

159

Next, in your custom.css add this code…

.custom #header {background: url(images/your header image.jpg) no-repeat; height: Xem; width: Xem;}

Change the X to whatever number gives you the desired effect

And that, my friends, is it..

Tagged as: add, Add new tag, header, header image, image

Leaving a comment with code in it...

If you would like to leave a comment and you have examples of code you want to show, you must "escape the code". This allows the entire code to show correctly by inserting certain variable around certain tags to make them show. If you don't "escape the code" your code will show up broken, mangled, and it won't be able to be seen correctly. "Escaping the code" is very simple...

Copy your code you want to show
Click here to go to the site to escape the code
Follow the directions, it's so easy
Once you have the escaped code copied, paste it in the comments area where you want
Now you can enjoy life

Go ahead, leave a comment...

{ 25 comments… read them below or add one }

milad May 11, 2009 at 8:25 am

having problems installing image header please help. The original header and title (default) can still be seen under the new image how can make sure that the new image (logo) is all that is seen in the header?

Nasty May 11, 2009 at 11:02 am

Which version of Thesis are you using? Do you have a link to your site?

Keefer May 13, 2009 at 6:28 pm

Anyway to have a Rotating Header Image that refreshes on the reload of a page? Also link back to home.

Nasty May 14, 2009 at 11:31 am: Yeah sure, first check out the easy way to rotate images with this tutorial…

http://www.thesishacker.com/really-easy-way-to-have-random-rotating-images

Next, when you write your code, surround each image with the <a href> </a> tags and have the url of the link be the url of your home page

Reply

John S May 14, 2009 at 4:42 pm

Hi and thanks for this post.
I have my image in the correct directory and have copied th code into the bottom of the custom_css file but I do not see any change to my header. Also can you clarify what the X is for. Thanks in advance.

Nasty May 15, 2009 at 9:05 am: If you go back and read the tutorial you’ll see the X is supposed to be replaced with a numerical value

when you write your code Xem should be, say, 20em or whatever number gives you the desired effect. You don’t see your image because you don’t have any values for height and width

Reply

Milad May 14, 2009 at 4:53 pm

Hey guys thanks I solved it finally I had to keep resizing i am used to using the px instead of the em but its working now.

Alison Moore Smith May 15, 2009 at 1:03 am

I have a clickable header image, but I’d like to have a SECOND image float to the RIGHT in the header of a single static page.

Any ideas?

Very informative site. I’m afraid I won’t get much sleep tonight as I’ll be reading!

Nasty May 15, 2009 at 9:14 am: Check out this tutorial and see if it helps

http://www.thesishacker.com/add-images-within-your-header-image

Reply

Yelwrose May 16, 2009 at 3:16 am

I’m having the same problem as milad, above. The original header and title (default) can still be seen under the new image. I am using Thesis 1.5. I have no idea what values to insert for X. The site I’m building for a friend is http://virtualharplessons.com

Is anybody else up at 4 a.m.?

Nasty May 16, 2009 at 4:21 am

If you still have the old header there simply get rid of it by putting this in your custom_functions.php file

remove_action ( ‘thesis_hook_header’,’thesis_default_header’);

The values for height and width is something you’re going to have to figure out. Do you have firebug? For starters I would say at least do 900 em wide by 300 em high and go from there

Paul May 16, 2009 at 7:47 am

Worked a charm. Thank you

Yelwrose May 16, 2009 at 12:06 pm

Sorry for the many posts, but wanted to let you know I was able to remove the default title by simply clicking the “Remove Thesis default title” in the Open Hooks header box.

The only problem I have left to resolve with the header is how to make the image clickable.

Please feel free to remove the extra posts. Thanks!

Nasty May 17, 2009 at 7:54 pm: wrap your image source tags with the <a href> tags

<a href>the url of the page you want the image to click to</a>

Reply

Kim May 16, 2009 at 1:20 pm

Hi there,

I am so close to having this work I have an error showing up on my page:

Warning: Unexpected character in input: ”’ (ASCII=39) state=1 in /home/content/y/o/u/youbehealthy/html/blog/wp-content/themes/thesis-15b-r5/custom/custom_functions.php on line 31

Any idea what I should change/fix?

Thanks so much,

Kim

Nasty May 17, 2009 at 7:52 pm

Sometimes when cut and paste code the single and double quotes end up being slanted. Make sure all your single and double quotes in your code are straight up and down and not slanted.

Kim May 18, 2009 at 4:36 pm: Thanks! It worked!

Reply

Alison Moore Smith May 16, 2009 at 3:02 pm

I switched out the way I created the old clickable header to use this cleaner version. A couple of problems:

(1) The general thesis theme has to thin grey lines that separate the header from the content. (See my name link.) When I add this css (the hook doesn’t affect it), those two lines only show ups to the length of the header, instead of going all across the content area. ??? (Can’t link to it, that site isn’t live yet.)

(2) The header is no clickable. I did read your clickable header tutorial, but it seems (unless I’m mistaken) that is uses your OLD method of adding images to the header?

Or I just don’t get it, which is completely possible.

Nasty May 18, 2009 at 1:46 pm: check out the newest tutorial…

http://www.thesishacker.com/the-easiest-way-to-add-a-clickable-header-image

As far as the lines, I really need a link to the site to examine it

Reply

Yvonne, My Halal Kitchen May 17, 2009 at 12:29 am

Hi,

I also have Thesis 1.5- just got it a few days ago. My own logo is also appearing atop the default header so I read some of the instructions for removal listed above. Problem is, I don’t have a custom_functions.php file! I have custom_template.php page and a functions.php page. Where do I insert the above instructions? I thought i wasn’t going ot have to mess around with code when I paid for Thesis!!!

I would also like to change the font color of various text on my blog. How and where in the world do I do this?! I know I need to find the code#s of different colors, but is there a hidden location for all these codes? What file do I have to mess around with in order to change anything????

Thanks for all your help- much better here than in the forums!

Nasty May 18, 2009 at 1:43 pm: Your custom_functions.php is located here…

yoursite.com/wp-content/themes/thesis/custom/custom_functions.php

You add the code in that file on your desktop, save it, upload it to the correct directory above.

To make styling changes, you edit your custom.css file on your desktop, save the changes, upload it to the right directory. The same as above but change the custom_functions.php file to the custom.css file

Reply

Lisa May 17, 2009 at 5:07 pm