How to Customize Your WordPress Website Header

Share this on:

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!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

6 responses to “How to Customize Your WordPress Website Header”

  1. Angela Avatar
    Angela

    Thank you so much, I am new and tring to make a header and had no idea what I was doing. This is a great tutorial!!

  2. Marcy Diaz Avatar

    Thank you! I’m glad it helps you, Angela.

  3. sameer Avatar
    sameer

    Thank you i was trying to put pictures with link on one of my website thanks for your help in this regard.

    1. Marcy Diaz Avatar

      You’re welcome, sameer. I’m glad it helped!

  4. Brianna Bond Avatar

    Hi Marcy. Thanks for posting this tutorial.

    I wasn’t able to follow your instructions. My toolbar doesn’t have an “appearances” tab on the left side of the tool bar. To adjust the header, I go to “design” then “customize.” Then I can upload a new header image.

    My problem is the header image currently takes up the entirety of the page and I’d like to shorten it. However, I don’t see any options for adjusting the length of the image. I can crop the image, but I can’t resize it. Any thoughts? I’m wondering whether it’s a flaw with the design template. My gut tells me I might need to change templates (ugh!) as I noticed my current template (Affinity) is retired.

    I am a novice with WordPress and appreciate any help or insight you can offer.

    1. Marcy Diaz Avatar

      This tutorial doesn’t apply to your website.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.