How To Customize Your Wordpress Theme Header – Part One
October 15th, 2009
One of the best things about using Wordpress as a platform is all of the free Wordpress themes that are available on the web. The problem, however, is that with free themes, what you see is what you get. If you want to customize your theme by adding your own header graphic or changing the size, color, or style of the header title font, you are simply out of luck…
Until now 
This two part series on how to customize your Wordpress header will provide the knowledge you need to make your theme reflect your personal or corporate identity without having to pay a professional big bucks to do it.
Let’s start with replacing the header image -
Customizing Your Wordpress Header Image
Changing your Wordpress header to your own image is actually a pretty simple task. This tutorial will not instruct you on how to create header graphics for yourself, as that is not the scope of this blog. However, the first step to replacing the header graphic in your theme with your own header is to find the current header image in your theme files and determine its dimensions. Header graphics can usually be found in the “images” folder within your Wordpress theme, and may be called “header.jpg”, “header.png”, or another image file type. Create or edit your header image to be the exact same dimensions as the header included with your theme, and then do one of two things:
1) Save it in the “images” folder of your theme with the same name as the original header to replace the file altogether, or
2) Keep the old header but change the style.css file to display the new image instead of the old one.
If you want to keep the original header in case you want to change back, the second option is a safe way to do it. Just open the style.css file in your theme file folder and find the code that controls the appearance of your blog header image. It should look something like this:
/* header area */
#header {
background: #0C72A2 url(images/head-bg.gif) repeat-x;
height: 110px;
border-top: 5px solid #222D2D;
position: relative;
color: #D16683;
}
Simply change the name of the file that is there (usually header.jpg) to the new header file name. Once the style.css file reflects the header file you want to use, just upload the new header image to the “images” folder in the theme folder on your server and if necessary, upload the edited style.css file as well.
Posted in 
