HowTo: Change Kubrick header in default WordPress Theme
I thought I wanted to have my own image as header, but it was damn near impossible to figure out where to do the change in the default kubrick theme that comes with WordPress. However, I found a solution =). In this tutorial I will show you how to change the Kubrick header in the default WordPress theme.
Find wp-content>themes>default>images>header-img.php
Find the above path on your site by accessing the site by FTP, you can use a free one as Cyberduck (for mac OS X) or Free FTP by CoffeeCup (for windows). Go to the path and use a text-editor to edit header-img.php. Im using TextEdit in OS X.
A short explanation of the technique I use. In php you can place comments in the code for you self or others and you do that by typing ‘/*‘ then you write your comment and end the comment with ‘*/’.
Now comment out the following pice of code, found in the header-img.php like this:
/* <- Remove If you want the color thing back.
// If we don’t have image processing support, redirect.if ( ! function_exists(‘imagecreatefromjpeg’) )
die(header(“Location: kubrickheader.jpg”));// Assign and validate the color values
$default = false;
$vars = array(‘upper’=>array(‘r1′, ‘g1′, ‘b1′), ‘lower’=>array(‘r2′, ‘g2′, ‘b2′));
foreach ( $vars as $var => $subvars ) {
if ( isset($_GET[$var]) ) {
foreach ( $subvars as $index => $subvar ) {
$length = strlen($_GET[$var]) / 3;
$v = substr($_GET[$var], $index * $length, $length);
if ( $length == 1 ) $v = ” . $v . $v;
$subvar = hexdec( $v );
if ( $subvar < 0 || $subvar > 255 )
$default = true;
}
} else {
$default = true;
}
}if ( $default )
list ( $r1, $g1, $b1, $r2, $g2, $b2 ) = array ( 105, 174, 231, 65, 128, 182 );
Remove If you want the color thing back. -> */
That will remove the blue gradiant image, and instead turn the header black. To reveal the picture underneath you need to comment out a bit more:
/* <- Remove If you want the gradiant back.
// Blank out the blue gradiant
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 19;
$x2 = 740;
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
}// Draw a new color thing
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 20;
$x2 = 739;
$r = ( $r2 – $r1 != 0 ) ? $r1 + ( $r2 – $r1 ) * ( $i / $h ) : $r1;
$g = ( $g2 – $g1 != 0 ) ? $g1 + ( $g2 – $g1 ) * ( $i / $h ) : $g1;
$b = ( $b2 – $b1 != 0 ) ? $b1 + ( $b2 – $b1 ) * ( $i / $h ) : $b1;
$color = imagecolorallocate( $im, $r, $g, $b );
if ( array_key_exists($i, $corners) ) {
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
list ( $x1, $x2 ) = $corners[$i];
}
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $color );
}Remove If you want the gradiant back. -> */
Thats it, you are done. Now your header will reveal kubrickheader.jpg, and not the generated gradient. Of course you could delete the pice of code you commented out, however, you might find it useful at a later point. If you are like me you will keep exploring ways to give you blog a look and feel that you like, which is why I recommend that you keep the code.
Insert your own picture in the Kubrick header default WordPress Theme
All you have to do is to upload (with your FTP browser, to the location where you have located your default WordPress theme) your header image with the same dimensions (758×200), extension(.jpg) and name as the kubickheader.jpg. And replace the default header image.
Now make sure that your image has the right dimensions and it must have the name kubickheader.jpg, for this tutorial to work.
This is my result
Update:
Thanks a lot for all your comments. I really appreciate it =)
June 12th, 2008 at 21:27
Hi,
I wanted to drop you a comment to let you know that you can change the file that is chosen for the header in wp-content>themes>default>styles.css
Modify the #header background url() attribute
Also, if you have already set you header background colors (wordpress will add it in there any way) and you need to change the line:
add_action(‘wp_head’, ‘kubrick_head’);
to
//add_action(‘wp_head’, ‘kubrick_head’);
in the file wp-content>themes>default>functions.php
PS, I find your blog very interesting! Thanks!
June 12th, 2008 at 22:41
Thank you very much. I will add that to my post in due time…
June 19th, 2008 at 04:54
Thanks! I found this post very useful… it worked for me. I’m a newbie and I wonder if you could answer another question…
I’m using a graphic that includes text. But if I leave the text blank for Blog Title and Description, within the Admin board of WordPress (on the Settings page)… then I get nothing up in the Title bar of the browser.
Does that mean the search engines won’t know the name of the blog?
How can I get the title info into the browser’s title bar?
Thanks,
Brian
June 19th, 2008 at 09:30
Hi Brian,
Im glad that I could help you. I think there are at least two possibilities to solve your problem. I have made a new post regarding your issue, I hope it will be helpful.
June 26th, 2008 at 20:27
I am a total newbie so I apologize for the stupid question, but what do you mean when you say that we need to “comment out” the code? Do we replace the code in the header-img.php file with your code above? Or do we add your code to the existing code?
Thanks!
June 27th, 2008 at 05:13
Hi Kenny,
We all have to start somewhere so it is alright to be a newbie for a while. You can either replace the existing code with my code, or simply add the signs I have written with read to your code. Both solutions have the same result. I hope this helps you.
August 18th, 2008 at 21:15
hello, I am so happy i found this option I see so many people with header pics and i couldntfigure out how it was done, Is there an option to get pics form flickr or any other pics sites? I know we have plugins for flickr photos in posts….but what about he header?
August 23rd, 2008 at 15:08
Kenny, “comment out” simply means turn the code into comments. When you are writing code, you can insert comments to explain what the code does. To do this you just type your comments in between these /* and */ (these change depending on what language you are using). So, in the example above, those characters were added, essentially turning the code into comments so that it won’t be executed.
September 1st, 2008 at 20:11
Did exactly what you told – just replaced the code into wp-content>themes>default>images>header-img.php with your code piece. The problem now is that I lost rounded corners of the header, and my header image didn’t reveal. Any suggestions what I may have done wrong? [see http://www.peldosadarbnica.lv/
September 3rd, 2008 at 04:24
The only tutorial that actually worked! Thank you!
September 11th, 2008 at 08:55
Thank you!!!!
September 30th, 2008 at 18:42
Thanks a lot.
This one made my day :)
October 9th, 2008 at 21:51
Hi, I just moved my blog over from http://www.blacksnextdoor.wordpress.com to http://www.blacksnextdoor.com and I want to customize the header but I’m looking for a button to click that will allow me to upload my photo into the header that doesn’t exist. What do I do now? I have no idea where to enter the various codes everyone’s referring to here. In file editor? Theme editor? Help!
October 10th, 2008 at 11:45
Hi Jen,
I have updated the tutorial. So you you should be able to work it out now. The file that I have edited above needs to be edited with a text-editor. The file is located in the path that I have written, and you need to access that path by a FTP application.
Hope that you will work it out.
October 10th, 2008 at 16:18
Hi Philip, thanks for the help. The original pic that I uploaded into my old wordpress header is a jpeg file on my deskstop. Is that right or should I have done something else to it so I can code it into my new header at self hosted wordpress? I’m at the HELP section of WordPress, reading how to use it and it looks like changes to the Kubrick header would happen in CSS;that I would go in there and enter the code that you’re sharing. Am I getting this at all? Thanks!
October 10th, 2008 at 16:42
OK, I went into my control panel of my new self hosted wordpress site and have created an FTP account. Was this a major step forward or am I lost???
October 10th, 2008 at 16:44
Hi Jen,
I have updated the tutorial again and I hope that it will suffice this time. You need to replace the old header-image with yours. And it needs to have the same dimensions and extension as the default header-image.
I hope this will work.
October 10th, 2008 at 16:47
Hi Jen,
What you need to do is to get a FTP application. Then access your site with this application. Afterwards you can follow my tutorial.
I can recommend CyberDuck for OS X.
October 12th, 2008 at 13:39
Thanks for the info. What I also found useful was to create my new header image using the default kubrickheader.jpg image. Use any graphics editor to blank out the blue box and add your own imagery inside the grey line border.
That way I was able to keep the nice looking border around the image. It also meant that the image was exactly the right size for use with the template.
October 13th, 2008 at 08:30
Hi Syrilion,
If you look at my final picture at the bottom of the tutorial, you will find that what you have described is exactly what I have done. So I thought that was sort of sort of obvious :) but thanks anyway.
October 17th, 2008 at 19:58
Hi Phil, hope all is well, making some progress with my wordpress blog design but still having a tough time with the header! Last night, I went into the header.php template file and everywhere I saw ‘kubrickheader.jp’, I replaced with the ‘name of my photo.jpg’ and everywhere I saw ‘bloginfo’ I put the link to my site/wp-content/images/nameofimage.jpg instead. When I was done, I hit visit site and got a ‘parse error message’. I couldn’t remember the original code so I called bluehost and they reset me so my site’s back but I have no idea what went wrong and am afraid to mess with the code again. Is there anyone I can hire do you think? Or should I be fearless and go again with any recommedations from you on what I did wrong? All advice would be appreciated!!!
October 20th, 2008 at 06:59
Hi Jen,
What you have to do is to find tutorials on the things you want to change and then learn from the tutorials.
I think you have misunderstood my tutorial. You need to upload your picture to the same path as the kubickheader,jpg and replace this image-file with your own. At the same time giving your image file the name kubickheader.jpg.
Lets say your image name was “jen.jpg” then you would have to rename it “kubickheader.jpg”. I cant see why you have been trying to replace bloginfo with that link?
November 20th, 2008 at 07:04
Well, i can get most of it to work, but my image is the wrong size and I cannot seem to alter it at all. I edited it to the correct 758×200 size, but it did not work
November 20th, 2008 at 08:23
Hi Hyponotic,
Im not sure that I have understood your problem completely. However, if you can’t alter the image dimensions you need an image editor of some sort. I use Photoshop and have been very happy with it. To make your template adopt your picture dimensions you will need to change the value of the id/class that is the container of the image, or the id/class that contains the image. In the kubrick default wordpress theme you would have to change the value of:
#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px;
}
I hope this helps you.
November 28th, 2008 at 17:33
Hi
Great help I am a novice at WordPress but your instruction were a joy to follow inserted my own image in no time at all. Didn’t really know what I was doing but it worked OK thanks to you and your kindness in taking time out to help others.
The Law of Abundance should be strong in your life.
January 22nd, 2009 at 02:42
Finally something that really worked! I scanned the WordPress.org Codex and googled for days, spent hours trying several options before I found this. The need to customise headers often arises from combining a blog with an e-commerce website, no-one wants to look like Kubrick when you are promoting a hot shop! Big Thankyou, this is a very useful blog.
January 27th, 2009 at 03:26
Worked Great Thanks!
January 30th, 2009 at 07:17
I couldn’t get this to work in 2.7
is the php file different?
February 2nd, 2009 at 10:21
Thank you so much for simplifying this process! I can’t wait to explore the rest of your blog.
February 18th, 2009 at 18:57
Your solution worked perfectly. Thanks for taking the time and trouble to post it.
March 1st, 2009 at 07:07
[...] http://www.aetas.dk/archives/8 [...]
March 3rd, 2009 at 20:30
How would I set a different header for a different page –
say i want one header on my home page and a different one on my blog page –
i am using kubrick – i figured out how to change the header but i want to set a different graphic for my blog page
thanks
James
April 28th, 2009 at 16:24
Just wanted to give a big thank you to you for this post and the blank title post. It is the only thing that finally worked!
All the best
May 28th, 2009 at 16:14
You rock – I basically commented out all of the code in header-img.php and that solved my entire issue – I am sure there is deeping coding I could do to move the call to the php file but this works for now
thank you X 1,000,0000
June 21st, 2009 at 17:23
Oh my lord, Thank you so much for this hahaha. I have put so much time into figuring this out for wordpress.org to the point where I gave up for a month, but then somehow found your blog here.Yea I'll admit, it was probably simple, but it wasn't for me until I stumbled upon you blog and in less that 20mins I finally got my image up THANK YOU SO MUCH.
This was driving me nuts, really wish wordpress.org would be a little bit easier for us non computer science guys, but PHIL I REALLY APPRECIATE the simplicity thanks for the help. I'm going to post a link to your blog on my facebook group page.
Checkout my logo finally on my site http://transitioningveteran.com/wordpress/
June 21st, 2009 at 20:05
Ok now i'm back to the beginning haha, I have seem to still have My logo in my Dashboard when you go to custom header, its showing, however when you update header and go to my site, My logo is no there. I did have it there at one point but do not know what I have done.
Any suggestions? I copied your code up top exactly to a T with no changes to it and got the appropriate files uploaded onto my FTP site, and my logo is showing in the custom header link on my dashboard.
thanks again Steve
June 23rd, 2009 at 15:36
Hi Philip,
Great blog! However, I'm a little confused – I've got a header image up, and I'm trying to eliminate the blue "blob" header background. I went in to the FTP menu and typed in
wp-content>themes>default>images>header-img.php in the Search menu bar, but it couldn't be found. I tried searching manually for this, but could also not find it.
Is there some other way i could eliminate the blue background?
July 12th, 2009 at 11:36
Hi Steve
I took a look at your website. It really turned out very nicely! I really appreciate the feedback it is nice to know that my info can help others too =D
/Phil
August 17th, 2009 at 09:13
Hi Brian
You should use the SEO Plugin, and put there the title and description of your blog.
On the settings page, you should leave it blank.
Google will see your SEO plugin and your title and description.
BTW, I suspect that this way you get a better ranking …
You can see how it works on my blog Como criar um blog.
Cumps
@ Philip
Good post.
I`ve some blogs that as the kubrick theme, and i didnt know how to change the header.
I`ll try your solution and came back here to say how it went …
Cumps
August 31st, 2009 at 23:55
[...] Aetas.dk » Blog Archive » HowTo: Change Kubrick header in default WordPress Theme http://www.aetas.dk/archives/8 – view page – cached #Aetas.dk RSS Feed Aetas.dk » HowTo: Change Kubrick header in default WordPress Theme Comments Feed Aetas.dk Exams Gallery iPhoto edit problem — From the page [...]
September 2nd, 2009 at 20:52
Works seamlessly.
Thank you.
September 10th, 2009 at 13:02
Another WordPress newbie here (though with plenty of HTML and CSS experience). Figuring out how to remove that Kubrick header without disturbing any of the other code was driving me nuts… thanks for the simple fix!
September 12th, 2009 at 20:13
I have successfully integrated the image that I wanted to replace the original with. (Thank you very much for this tutorial.) However, now I am trying to figure out how to activate the newly integrated image so that it can be "clicked" on so that it will return the user to the homepage? Did I miss some step?
October 5th, 2009 at 15:29
Hi Philip
Can we put the image clicable, with no title text, or description?
I use SEO Plugin.
So, the title of the post + homepage of the blog is:
Post Title Name | Blog Title Name
But i want to have only the Post Title, so wath i do is go to the blog settings definitions and erase the blog title and description, and just leave the blog title and description in the SEO Plugin definitions (title + description)
That way i can get only the post title without the blog title as well.
But i only can do that in a wordpress theme that as the possibility to have a custom clicable header image.
But, if i do so with a Kubrick theme, and erase the blog title and descrition on Settings, it only apears the header image and no blog title and no descrition text
So, my question is:
Can we have a clicable image, with no blog title & descrition text on kubrick template?
Thanks,
November 6th, 2009 at 05:39
This is awesome! My Kubrick header is not 758×200 but 740×200 but that was less painful to do than to figure how to do away with the original header. Thank you for this article!
November 11th, 2009 at 12:11
Hi Merry Traveller
I just looked through your website. Great inspiration! And gorgeous pictures!
February 23rd, 2010 at 01:23
Version 2.9.2
A warm and sincere thank you. I am very new at this and tried several approaches unsuccessfully until I followed your directions.
Using Version 2.9.2 did not 'remove the blue gradiant image, and instead turn the header black' et the end of the first step, but after a few tries, I decided to proceed with step 2, and voilà!.
Note: I copied and pasted your codes right OVER the existing original codes into Local Site and then uploaded. Incidently, if someone tries and does not succeed, verify that the new file does get re-written… if it doesn't, check your permissions for heade.img.php.
http://alfacom.ca (still working on it – this pic exceed the frame, needs to be cropped and lots more to do before I go 'Live')
Cheers
February 23rd, 2010 at 08:02
Hi Alexandre
Thank you very much for your comment. Im glad that I could help you out. I will update my tutorial on the Kubrick header as soon as I get the time. It does seem to me that a lot has happened since my first version, which was using WordPress 1.5 (I think). Let me know how it works out for you. And if you do need me to update my tutorial prior in time, I will look in to taking the time.
Best Regards Philip
February 24th, 2010 at 19:56
He Philip,
you're doing a great job helping out people like me – thank you for the reply.
I can't figure out why the image does not appear like yours – it exceed the frames by 1milimeter on each side – and no white border shows – no round corners. Image size is 769X200. I have used Notepad++ to perform the changes – it did ask me about format (e.g. ANSI, UTF, UTF 8) and I chose UTF. I must be doing something wrong somewhere. (learning…) Cheers.
February 24th, 2010 at 22:09
Hey Alexandre,
Thank you very much for your appreciation. Its always great to know that the help that Im able to provide can help others. I think your problem is that your image size is too wide. Your picture has to be exactly 758px. You can use Gimp which is an open source image editor.
Hope that helps =)
February 25th, 2010 at 00:07
Hi Philip, you're very kind :) Cropped image to no avail. Take a peak if you have time. After first edit of code: no black space. After second edit: see the result?
The result is the same if I load the image and rename it to kubrickheader.jpg without changing the original file at all. Perhaps it's because I use WP 2.9.2? This is embarrassing. I don't know how to thank you.
April 13th, 2010 at 17:37
Great post! I got the image subbed out, but I lost the rounded corners on the top. Help??? I’d love the top to have them to match the bottom. http://magiclight-tours.com/blog/ Thanks for any advice!!
April 15th, 2010 at 07:58
Hi Daniel
The rounded cornes is part of the image file. If you want to keep them, you will have to add them to your current picture. Though I think that it looks really cool as it is right now.
Best regards
Philip
July 9th, 2010 at 07:03
I have just started http://newimagecreationsdermatology.com/wp I am a big n00b but I want to thank you for helping me with this tutorial on how to get the blue blob out.. LOL! Now to my next step. The text…lol… much appreciated!