How To Customize Your WordPress Theme's Header Image

One of the most time consuming parts of starting a new WordPress blog can be choosing the perfect theme. Finding the right balance between the look you want and the features you need can be difficult, to say the least. Often times, the header image can make or break a theme for a potential user and unfortunately, not all themes come equipped with options to easily customize that image. Today we're going to remove that obstacle by demonstrating how to customize the header in your theme of choice.

Locating Your Theme's Header Image

First and foremost, find a theme you like. For this example, I'm going to modify the "PressPlay" theme by seventhsteel. The first step is to identify what is already being used for a header image. To do this, we need to open up the theme's style.css file. Note: Always save a backup of a file when you're editing code. You always want to be able to go back to square one if something goes wrong! Just use your favorite text editing file for this... I usually use NotePad++ (you can find it on Google).

There are a couple of ways to find this. If you're a FireFox user, you can install an addon called FireBug to inspect the header and identify the CSS class that controls it.  If you don't use FireFox (or FireBug) you can look at the source code for your blog (usually under the "View" menu). Search that document for your blog's title to locate the header section, and make note of whatever container the header is in. Then all you have to do is search the CSS sheet for that container class or ID.

Once you're in the CSS file, you're going to look for the class or ID that controls the header. In the case of PressPlay, it looks like this:

div#wrapper {
width:1000px;
margin:0 auto;
text-align:left;
height:100%;
background:url('images/header-bg.png') repeat-x;
background-color:#fff;
border-right:1px solid #cdc;
border-left:1px solid #cdc;
}

Now, you can see "background" attribute on the sixth line of the code above. You can also see the file that it is calling, followed by repeat-x this is the file you need to replace with your own image. Now sometimes, the image will be the full size of the header, or it might be a narrow image like this one that is set to repeat horizontally. What we're going to do today is replace this narrow, horizontally repeating image with a full width image that doesn't repeat.

Make Sure Your Custom Image Fits The Theme Dimensions

Now is the time to prepare your image, or adjust one if you already have it. You will need to makes sure your image file has the same name as the one referenced in the stylesheet. You'll also need to keep the current images dimensions in mind, to make sure yours fits. In our case, the image needs to be 1000 pixels (the width of the container above) and the height needs to be 175 pixels (the height of the original image).

Because we're transitioning to an image that doesn't need to be repeated to fill the space, simply replace 'repeat-x;' with 'no-repeat;'. If you were using something simple, like a gradient, or repetitive pattern, you could create an image wide enough to display one repetition of the pattern, and leave the repeat setting in place.

Upload Your Custom Header and Replace The Existing File

Once your image is prepared, upload it to your server and replace the existing file. To figure out where the image belongs in your specific theme, refer back the the CSS block above for the file path (where we got the file name). In the PressPlay theme, the image goes into the "images" folder of the theme directory. As long as you name the image to match the original, the theme should pick it up automatically.

If you're working with a theme that doesn't already have an image in the header, and just used a solid background color, you will need to add the line for the background image into the CSS class with the appropriate path to where you are going to be saving your file.

That's it! You now have a customized header on your theme!

--

Chad is the author of www.WelcomeToWordPress.com, a blog dedicated to helping you create and optimize your very own WordPress blog with articles, tips, and step-by-step video tutorials.