How to use a header image in WordPress

Rate this post

Watch our updated video here:
Today we will be talking about how to use a header image in a WordPress installation. Before we begin, I want to emphasize that working with a header image will depend on the the theme you are using in WordPress. It makes a difference due to the surrounding graphics and colors that may already exist within a theme. The theme we will be using in this tutorial is the WordPress Twenty-Fifteen Theme that comes with a default WordPress installation.

Why use a header image?

In most cases a header image is simply used to make your site more eye-catching. It may be used to convey a theme, emphasize the products you create, promote your cause, or even provide identity information like a company logo. No matter your intent, the image is there to capture a person’s attention and keep them interested in your web page.

Some things to consider:

1) Your header image will ALWAYS depend on your theme. In this case, the header image size recommended by twenty-fifteen is 954 pixels x 1300 pixels. Click on Appearance, then Customize or Header in order to see the theme’s specifications for the header.

Make sure to take a close look at where the header image will go, because you will need to fit your image in that space.

2) Decide on your image. Consider the items that will be affected by the image that you place in the space.

If you are creating a header image to represent a company or a cause, make sure that it fits within the recommended image dimensions. In some cases, there may also be rules for the display of a company logo. Make sure to check those rules. Also, remember that that the image is being used for the web, so the image should be optimized for that purpose. This means that the image shouldn’t be 4000 pixels by 3000 pixels and have a file size of 30 MB. Optimize the image to look good at web resolution (72 dpi) and keep the file size as small as possible. This helps to keep loading times down to a minimum.

3) Upload and review the image on the site in order to make sure that it appears the way you want it to appear.

How do you upload a header image?

1. Login to the WordPress Administrator
2. Click on Appearance, then click on Customize or Header
3. Click on Add New Image
4. Upload file or select image from the Media Library
5. Click on Select and Crop in order to proceed
6. If necessary, crop the image by dragging the crop box to select the image you wish to use
7. If the size is the appropriate size already, then simply select SKIP CROPPING
8. Review your page with the header image
9. If your image is okay, click on SAVE AND PUBLISH to save your changes

InMotion Hosting was founded in 2001 and provides personal and business web hosting for everyone! For more information about InMotion Hosting and the services we provide see here:



Mazi has nine years of web development experience with the past five years spent honing his skills with WordPress plugins and themes. He's an expert in WooCommerce and is the author of the Simple Sales Tax plugin, a popular sales tax compliance solution for WooCommerce. Brett understands the importance of excellent communication, prides himself on producing high-quality code, and is comfortable working solo or as part of a team.

Leave a Reply

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

Check Also
Back to top button