The Header Image in WordPress Twenty Fifteen - dummies

The Header Image in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

It’s easy to work with the WordPress Twenty Fifteen header image. Most themes have a header image that appears at the top of the website. This image is generated by a graphic defined in the Cascading Style Sheet (CSS) value for the property that represents the header area or through the use of a custom header feature in WordPress.

In the Twenty Fifteen theme, all the hard work’s done for you, so including a custom header image on a site that uses that theme is easy.

Customizing the header image

With the custom header feature that the Twenty Fifteen theme supports, you can upload one, or several, header images to display on your website.

The header in the Twenty Fifteen theme actually fills the left sidebar with the image that you upload (on small screens and mobile devices, the image fills the header area), or you can upload multiple images and set the option in Twenty Fifteen’s customizer to randomize the header images so that a different image displays each time the page is refreshed in the viewer’s browser window.

Uploading your own header image

Adding the header image to the Twenty Fifteen theme allows you to add color or texture to that left sidebar image. You can even create a header image that has photos or text displayed — it really depends on what your preferences are. The preferred dimensions for the header image in Twenty Fifteen is 954 pixels in width by 1300 pixels in height.

Once you decide on the header image you want to use, follow these steps to upload the image to your website:

  1. On the WordPress Dashboard, choose Appearance → Header.

    The WordPress Customizer loads in your browser window, displaying the design options on the left and a preview of your website on the right.

    The Twenty Fifteen Header Image section.
    The Twenty Fifteen Header Image section.
  2. Scroll to the Header Image section and click the Add New Image button.

    The WordPress Media Library opens, where you can select an image from your Media Library or upload an image from your computer.

  3. Click the Upload Files tab and select the image you want to use from your local computer, click Select Files, and then click the Open button.

    Your chosen image uploads to your web server, and the Crop Header Image page loads in your browser.

  4. Click the Select and Crop button to resize your header image.

    The Twenty Fifteen theme’s default header size is 954 x 1300 pixels. Generally, it’s best to upload a new header image already cropped in an image-editing program to that exact size. However, if your image is larger, you can use the built-in image crop tool to fit the image in the default space after you upload the header.

    Cropping the header image in the Twenty Fifteen theme.
    Cropping the header image in the Twenty Fifteen theme.

    To resize and crop your larger image, simply drag one of the eight small handles located at the corners and in the middle of each side of the image. You can also click within the image and move the entire image up or down to get the optimal placement and cropping effect you want.

  5. Click the Crop Image button.

    The WordPress Customizer page loads in your browser window and displays the header image you just uploaded.

  6. Click the Save & Publish button at the top right of the Customizer.

    The changes you’ve made are saved to the header image, and it publishes to your site.

    The selected header image displays in the WordPress Customizer.
    The selected header image displays in the WordPress Customizer.

This shows an example using the Custom Header feature available in the Twenty Fifteen theme. The header image has changed the look and feel of the website by adding color, dimension, and a bit of texture to the display of the website.

Displaying a unique header image.
Displaying a unique header image.