One of the questions I am asked frequently is how to change your header from a default header included with a WordPress theme, to one that's all your own.
Basically you just need to (1) find out the dimensions your new header should be (2) create it (or have it created) and then (3) upload it to your server.
Step 1: Figure out the dimensions you need.
There are several ways to find out the dimensions you'll need your new header to be:
The way I find an image's dimensions is to simply use the "Inspect Element" feature in my browser, Google Chrome. Here are some more ways to find the dimensions:
- Sometimes you're just told how big your header should be. For example, if you're using TwentyTen (the default theme in WordPress), go to Appearance –> Header and you'll see the measurements. TwentyTen's dimensions are 940 x 198 pixels. If you're using a different theme, check the theme's site, support forums, help, FAQ, ReadMe files or anything else which might specify the dimensions of your theme's header.
- Check in your theme files for the size of the header that came with the theme. Login to your cPanel (or fire up your FTP) and search for the header images for your theme. (Or, you may have your theme files on your computer if you had to download them before uploading them.) Probably the easiest way to find them is to login to your cPanel –> click the "File Manager" icon (under the "Files" section) –> (if it prompts you to choose a directory, choose "Web Root" –> wp-content –> themes –> click your theme folder. At this point, most themes have an "images" folder which you should click. Hunt around in there until you find your header image. You can click on it and then view it; often there is a "View" icon in your cPanel which allows you to see it.
- Save the image to your computer and then open it and search the Info about it to find the dimensions. Just right click on the existing header image (Mac users, Control-Click is the same as right click). On my Mac, I can look at an image in my Finder and get the dimensions.
Step 2: Create a new header.
You can create your own header or have someone do it for you. Make sure you make the header according to the dimensions required for your theme. Here are some resources that might be helpful:
- Many designers can create a blog header for you for $100-$150 or so. You can check out this list of designers for options.
- If you're not particularly technically inclined but would like to do it yourself, check out my How to Make a Blog Button tutorial (it would be the same process, only using your header's dimensions).
- If you've got a bit more technical know-how, try using the free, online Pixlr to create your own. (Of course you could also do it in any image editing software like Photoshop, Gimp, Illustrator or whatever else you've got.)
Step 3: Upload your new header to your server.
Once your new header is created, the easiest way to make the switch is to give your new header the same file name as your old header, and then upload the new one into the same location. For example, if my existing header is logo.jpg, I can name my new header logo.jpg and it will replace the old one. However, doing this will replace the old one completely and it will be gone. In other words, if you upload the new one and it doesn't look quite right, you can't retrace your steps and re-install the old one while you further tweak the new one. Make sense? So, to safeguard against this problem and to have the ability to revert back to your old one if you need to, follow these steps:
- Login to your cPanel.
- Click the "File Manager" icon under the "Files" section (if it prompts you to choose a directory, choose "Web Root").
- Click the "wp-content" folder.
- Click the "Themes" folder.
- Click the folder bearing the name of your theme.
- Many times there will be another folder named "Images" in which you will find your existing header image. (To ensure you are looking at the right image, highlight the one you think it is and then click the "View" icon at the top of the page.)
- Once you find the existing header image, take note of its name. Write it down.
- Now, go back to the header you just created and name it something similar but not the same thing. So, for example, if the pre-existing header is logo.jpg, I would name the header I just created logo1.jpg.
- Go back to your File Manager. Upload your new header to the very same folder where the old one is located using the "Upload" link at the top of the page. Once this is done, you should see the old (ex. logo.jpg) as well as your new header (logo1.jpg) listed.
- Now, you are going to rename the old logo.jpg file to something a little more different, like logo2.jpg. (Do this by clicking the "Rename" icon at the top of the page.) Now you will have logo1.jpg (your new header) and logo2.jpg (the old header) in one folder. You will not have logo.jpg at all. Note: During this step, your site will have no header for just a minute. You might consider putting your blog in maintenance mode (there's a maintenance mode plugin for this) during this process if you want.
- Now, quickly rename your new header from logo1.jpg to logo.jpg, again, using the "Rename" icon at the top of the page. Save. Now you have effectively replaced your old header with your new one.
- Refresh your site and you should see your new header.
- If you see your new header installed but it doesn't look right and you want to revert back to your old header again, simply go through the same process by changing logo.jpg (your new one) to logo1.jpg and then renaming logo2.jpg (your old old one) to logo.jpg. Now your old header will be back.
I know it sounds a bit confusing, but if you follow the steps, I think you'll get what I'm saying as you go. I hope it helps!