Change Or Add A WordPress Header Image
Changing or adding a new header image to a WordPress theme is one of the first things most people want to do to change the look of their WordPress blog. Changing a WordPress header image is a little easier than adding one to a theme that has none. Since all themes are coded differently its hard to explain exactly how to do this for each one, but here are the basics.
If your theme already has a header image then changing can be pretty easy but there are a few things to consider first. First you must determine what, if any, image or images your theme is using and how it is displayed. The best case scenario to change a header image is with the theme using one large header image. Some WordPress themes can be using multiple images for the header, using a small repeated image or even a larger image that is the header and background image for another part of the theme. These situations can be pretty tricky to work with if you have limited knowledge working with WordPress themes. The first thing to do is to determine what, if any header image your theme is using.
The easiest way to determine if your WordPress theme is using a header image is yet another reason to use Firefox as your web browser instead of Internet Explorer. With your front side (not the dashboard) of your WordPress blog loaded in Firefox, simply right click the header area of the blog. If a menu option is View Background Image then choose that and you will see the actual header image. In the address bar you will see the path to, and the name of the header image as well. Right click again on the actual header image and choose properties to get the actual size and type of the header image. If you don’t see the right click View Background Image option or see an image that doesn’t look like your header try different areas of the header.
For IE users, switch to Firefox! But if you must keep using Internet Explorer you will see a few options when you right click the header like, Save Background As and Copy Background. Chose Save Background As and open it on your computer with your image editing software to get the information.
You can also look through the themes stylesheet (style.css) to find the themes current header image, and you can figure out how to do that below when I explain how to change the header image.
Make sure your new header is the same size, or smaller than your current header image. Please realize that I can’t get into resizing or creating header images in this post or the comment section below, that can get very involved so you are going to have to use Google for more about your particular case. Now upload the the new image to your themes image folder. I suggest naming the new header image something short like header or newheder with no spaces in it. Remember when you right clicked the image to find its name in the address bar? Well that also tells you where the actual image is. It is almost always in the themes image folder like this:
YourSite.com/blog/wp-content/themes/ThemeName/images/header.gif
With the new header uploaded into the themes images folder next you need to change the themes stylesheet (style.css) to point to the new header image. This is also another way to find the header image. In the WordPress dashboard open the Theme Editor menu, click the stylesheet to load it in the editor. Now look for code similar to this:
#header{
width: 956%;
height: 118px;
background: #253B86 url(‘images/header.jpg’) no-repeat left;
The example above is specifying the width, height, background color (#253B86) and finally the path or URL of the header image file. Before editing this file you may need to change its file permissions in your hosting account to 777. I strongly suggest you make or have a backup of the these files before editing. Now just change the file name to the newly uploaded header and click Update File. Note: you can specify another absolute URL to the header image using the full URL like: http://www.SomeSite.com/image.gif, but I strongly suggest that the image be hosted and controlled you and not on a site that can remove the specified file.
If you don’t have a header image and want to add one follow the steps to upload a header image and after the code that specifies the background color add this part: url(‘images/header.jpg’) no-repeat left; You may need to play with the positioning, sizing or other settings to get it properly aligned. If all went right you now have the new header image showing on your WordPress blog.
This post really just scratches the surface and tries to explain the easiest circumstance to change or add a Wordpress header image. For example using multiple images, a repeated image or adding one that currently uses none can get quite involved. You may also need to add or remove the blogs title and description in the header. And then there is the chance that your theme is calling for the header in the actual header.php file! Wow, now I know why I never wanted to write this post, there can be so many variables involved and yours can be as easy as I explained or a big pain in the butt! If you just want someone to do it for you, my fees are very reasonable, just click the Contact link on the top right sidebar and send me an email.
Similar Posts:
- Make WordPress Custom Header Image A Link
- You Can Put Lipstick On A Static HTML Site But It Will Still Not Be A WordPress Site
- Adding The Sidebar To The WordPress Page Or Single Post Template
- How To Really Screw Up Your WordPress Blog
- WordPress 2.6 Now Available
If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.
Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!
Comments
Good article.
I use Firebug – (Firefox ext.) for inspect wordpress thems and css, it can give more information and see corrections in real time.
It can help to determine header location and much more.
Reply
I use Firebug too, but I didn’t want to open that can of worms!
Reply
You are right it is not necessary to describe extension in that article because it can be made simply as it is written here.
Besides this decision only for firefox but not for other browsers.
Reply
Firebug is exactly what you need to do this easily, the only catch is that you need Firefox. I guess you could import everything to a text editor. But I say if you want to blog you should know html/css basics anyways. Regards!
Reply
This will come in handy. Thanks!
Reply
Good text. I use only firebug
Reply
Thanks for this simple explanation. I’ll send it to my husband, who is my graphics guy. And I’ll be sure to check out Firebug.
Reply
Good share. Thank you for the good work!
Reply
Thanks for this simple explanation. I’ll use only firebug from now on
Reply
why don’t you just change the header image source? then you’ll still have the backup…
or will that not work?
Reply
You can change the image source to whatever you want and I touched on that in the post.
Reply
Hi,
Awesome insights. thanks for sharing nice article. Keep it up.
Reply
Thx for the good article. I used this explanation, wounderful..
Reply
it’s definately much easier to change the code to a different header image
or just edit the header, then keep the backup
Reply
Hi Jeff,
I can find everything I need related to Wordpress here in your blog. I will come back to look for more.
Thanks
Kha
My blog Ways To Work From Home Online
Reply
Thanks for this simple explanation. I’ll send it to my husband, who is my graphics guy. And I’ll be sure to check out Firebug.
Reply
Thanks for the nice and understandable explanation. Easy to reproduce it.
Reply
Hello Jeff! I really like the knowledge in your posts and tips on wordpress blogs, I have my hands full with a few of them. Thanks for the great information and I signed up for your newsletter too. Well, that was my 2 cents LOL… greatful to you for reading
Reply
Thanks for the guide im terrible at programing and have been fighting with my header for days lol.
Reply
Once you know it, its very easy! Good guide
Reply
The first time is a bit difficult after that I can put the images to all of my blog like a rocket. Thanks for your tips.
Reply
Very helpful article. Thanks for making it so simple. Wish all browsers worked the exact same way. Would make life a lot easier.
Reply
Leave a comment
Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.