Subscribe to RSS FeedHow To Change Your Blog’s Header Image
Most WordPress theme designers will include a header image that is used to summarize what your blog is about. More often than not the image used won’t actually match the topic of your blog and so you will want to change the header image. If you don’t know much about WordPress development or HTML/CSS for that matter this can be a very perplexing situation.
However, if you know where to look and have a great tutorial to go by you shouldn’t have any problem customizing your own blog’s header image. So let’s get down to it!
Since you are going to be changing your blog’s header image you are going to want to find a file named header.php inside of your theme’s directory. The header.php file is usually made up of the start of a web page and usually ends with the main navigation bar. Most designers follow a standard naming convention for the sake of simplicity and easier customization.
Inside of your blog’s header.php file look around for a DIV tag with the ID name of header.
<div id=”header”>
Normally inside of this DIV will be your blog’s header image along with main navigation. On my theme I used another DIV tag with the ID of logo.
<div id=”logo”>
Your blog’s theme may or may not have this. In any event you are going to want to be searching for the image you want to replace. This can be somewhat tricky as there are 2 ways to do this so I will do as best as I can to explain.
The first will be an image used within the source code itself. Right click on your header image and select Properties. If a window popups up with information about the picture such as the size and the URL we are good to go. If not, then keep reading as I will explain what you need to do. You should now have the properties of your blog’s header image up, go ahead and find out the image’s name. If you are using FireFox it will be listed under Image Properties under the Location: line. Scroll to the end of the line if you need to and you will find the name of your image. It will most likely look something like
http://yourdomainhere.com/images/nameofimage.jpg
The last part after the last / is the name of the image. Once you have that, go back into your source code and look around for that. Once you have found it just replace the name of that image with your own custom one. It is usually a good idea to keep the images the same size that way you don’t have to mess around with the styling to get things looking correct again. You can find the image’s size in the Properties window where we found the name of the image itself.
For those of you that weren’t able to get the name, this part is for you. Now, let me warn you this part is a little bit more advanced then the last part. So stick with me, I will try to make it as easy to understand as possible!
Inside of your theme’s directory should be a file named style.css or something very similar. We are going to have to mess around in this file to replace the header image in your blog. This code is going to look different than the normal source code of HTML. Look around inside of the style.css file and try to find something along the lines of some code like below.
#header {
background: #FFFFFF url(’images/header-background.jpg’);
width: 700px;
height: 30px;
}
That is a very general overview, you may see something different. Most WordPress designers will name their images according to where they are placed. A quick CSS lesson is in order I believe…..
#header - The ID of the DIV
background: - What color and background image is being used for the background of the header DIV
width: - The width of the header DIV in pixels
height: - The height of the header DIV in pixels
Ok, so now that that is taken care of lets continue. We are going to be modifying the background code to change your blog’s header image. If you have already uploaded your picture into the same folder as all of your blog’s default images just replace the name of the current image with your own and you should be good to go. If you uploaded your image to a different directory you are going to have to do a little bit of experimenting to get it right. Keep in mind like I stated before that it is a good idea to keep the images the same size so that you don’t have to mess around with anymore code. Even having your image 1 pixel too wide could screw up your entire blog’s layout.
Now, I could have gone REALLY into detail with this post and explained everything a lot further but this is a very general overview. Honestly, not every designer will name their HTML elements the same so it is kind of hard to write a tutorial that is easy to follow. If you have any questions about trying to do this or you find that you are having trouble getting this to work, feel free to shoot me an email and I will do my best to help you.
Post requested by WordVixen
Related Posts
October 10th, 2008 at 3:27 pm
Jarret,
Very well done. I have a feeling this is going to help a lot of people because for a newbie figuring it out is not so simple. I just stumbled this!
Taras last blog post..Big $$ Website Flips or Fast Profit
October 10th, 2008 at 8:32 pm
Jarret- You rock. :-) And good idea from Tara. I sent two people via Twitter, but a stumble is good. Heading there now.
WordVixens last blog post..Choose The Ads You Want To See
October 10th, 2008 at 8:34 pm
@Tara - Thanks for the SU submit :)
@WordVixen - Hey, I wrote this just for you ;)
I hope you were able to understand it? I tried my best but something like this can be tricky because everybody has their own coding naming conventions.
October 11th, 2008 at 1:48 pm
You already know I’m a student of the Jarret Cade Skype Academy for code retards and special needs bloggers.
Elijahs last blog post..Friday Update With Veronica
October 12th, 2008 at 3:11 am
How might I enroll? Total special needs here when it comes to stuff like this…..I just send my designer a begging email and a coupon for free Subway :-)
Dennis Edells last blog post..Do Advertisers Judge You By Design? What Do You Think…
October 12th, 2008 at 10:01 am
@Elijah - You are learning quite quickly ;) You’ll be fully up to speed in probably about another month.
@Dennis - Haha, no problem there. I am going to keep posting up WordPress customization stuff so make sure you keep checking back in if you haven’t already subscribed to my feed.
I wrote this post in response to somebody that had asked me how to do this and I will be writing another post this week doing the same thing. So if you do have any questions as to how to go about doing something, either leave a comment here or send me an email and I’ll see what I can do about getting a post up :)
October 12th, 2008 at 1:39 pm
Oh I’m subscribed baby! (George from Seinfeld) ;)
Dennis Edells last blog post..Do Advertisers Judge You By Design? What Do You Think…
October 12th, 2008 at 3:41 pm
“You already know I’m a student of the Jarret Cade Skype Academy for code retards and special needs bloggers.” - Hey Elijah, where do I sign up? Oh nevermind- Jarret, you know I’ll be knocking on your door shortly… my logo is almost ready ;)
REALLY great post! Digging!
BrilliantJENIs last blog post..Joel Comm Live, News
October 12th, 2008 at 3:58 pm
You know where to find me ;)
October 14th, 2008 at 9:28 am
Good stuff, Jarret! I figured this out the hard way a few weeks ago. I just opened that header.php and got to changing stuff until the image disappeared, then I knew I had the logo image file. I know, I know, that wasn’t safe. And this was before I knew how to back up the file. I would just reload the theme if I messed up…LOL!
Great break down and I am glad you gave the short CSS lesson.
Keep it coming!
Hey, why don’t you have the little stumble, digg, reddit, mix links at the bottom of your post. I think the Plugin is called Sociable..in fact it is sociable.
Freddies last blog post..Goal Setting Sunday: Week 7
October 14th, 2008 at 9:33 am
Hey Freddie, glad that you liked the post :) Good to hear that you got things sorted out by just jumping in, nothing wrong with that. In fact that is how I learned to do it myself.
I used to have Sociable installed on my old theme before this new one. I wasn’t happy with my blog back then and why I came up with the new design. When I had Sociable up I had a few people submit some of my shitty posts to SU and while it gave me some traffic nobody gave me any thumbs up.
So I figured I would just take it down with the new redesign and if people really thought that my posts were good enough for social bookmarking that they would be able to figure out how to submit the post themselves. I have contemplated on putting the plugin back in but for now I am going to leave it off for awhile.
October 14th, 2008 at 5:36 pm
Nice article. This is something that isn’t hard to do but goes a long ways toward making your freebie template (like I use! :P) look customized.
Lindsays last blog post..What Is Evergreen Content and Why Should You Write Some?
October 15th, 2008 at 3:09 pm
WOW. I did not know how to do this! Thanks for sharing it!
October 19th, 2008 at 11:02 am
[...] want to be sending people that are interested in that topic to your page. If you write a post about changing your blog’s header image you aren’t going to want to submit the page under the Environment [...]