How to Customize Your WordPress Website Header

Share

Custom Header for WordPress Website

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

May and June 2007 039 by ren

 

 

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.

Change Header WordPress 2010

  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.

WordPress Media Edit Image

  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.

WordPress Crop Image

  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”

WordPress Header Image

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

 

Your Website Can Stand Out From the Crowd

Tell me about your website project
for a personalized solution!

Contact Marcy »
Marcy-fixed-whtbkg-220

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website. When not online, I love to read, spend time with my family and friends, volunteer, and encourage those I know in what they do.

Comments

Share Your Comments

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>