How to Customize Your WordPress Website Header

The default WordPress themes have some beautiful images to choose for the header, but if you want to customize your WordPress Website header image to match your custom background, here’s how to do it.

Previous versions of WordPress did allow you to change your website header image, but you had to resize the image on your computer or use a web image editing service. Recent versions of WordPress (3.4) allow you to rotate, resize, and crop your images right inside WordPress. This tutorial uses the WordPress Twenty Ten theme, but many others have the option to edit the header.

Choose An Image for Your WordPress Header

We are going to start with is this cherry blossom image from MorgueFile.com.  Search for “May_and_June_2007_039.jpg” by ren (Of course, you can choose your own image too!) Download it to your computer.

(MorgueFile.com is a great source for free photos to use on your blog.)

Go to your WordPress website or blog and login to your Dashboard.

1. In the Admin navigation on the left, click on Appearance and then on Header.
2. Look at the text below the default header image. Note the width and height in pixels. For this image the width is 940 pixels and the height is 198 pixels.

Upload Your Header Image

Now upload the image to the Media Library, so you can use the WordPress image edit tools.

1. In the Admin navigation on the left, click on Media and then on Add New.
2. Drag and drop your image file into the uploader or click “Select Files” and navigate to your image.
3. You will see a thumbnail of the image. Click the “Edit Image” button below the image.

Rotate and Scale Your Header Image

Now we’re going to edit the image. You will need to click “Save” after each edit, and then click “Edit Image” again to do the next edit step.

1. First rotate the image. (If you are using a different image, you may not need this step.) Hover over the little icons at the top and choose the one that gives the tip “Rotate counter-clockwise.” Click the blue “Save” button.
2. Click the “Edit Image” button again. Then click the “Scale Image” button in the upper right hand corner.
3. In the width square you want to put in the width that you wrote down from looking at the default header image above. For this example the width was 940 pixels. The height will scale automatically.
4. Click the “Scale” button.

Crop Your Header Image in WordPress

Now we will crop the image so that the height is 198 pixels (the height from the default image above). We will keep the width at 940 pixels.

1. Click your mouse on the image and drag a box; it doesn’t matter what size.
2. In the Image Crop box, add 940 : 198 to the Selection box; the selection box will now be the correct size for the header. You can use your mouse or the keyboard arrow keys to move the selection box up or down to select the part of the image you want.
3. The radio button “Change can apply to All sizes except thumbnail.”
4. Now click the “Crop” button at the top.
5. Click the blue “Save” button.

Now click the blue “Update Media” button.

Set Your Edited Image As the Website Header

In the Admin navigation on the left, click on Appearance and then on Header.

1. Below the default image is “Or choose an image from your media library.” Click the “Choose Image” button.
2. You will see the image you just created. On the right, click on “Show” and then click the blue “Set as header” link below the image.
3. Then you will see the image. Since you have already edited it, click the “Skip Cropping, Publish Image As Is”

Now click to view your new custom header on your website or blog!