Using the WordPress Custom Header

Part of WordPress includes a “Header” feature that lets you upload and crop photos that you can use in a header of your page. Before in the past the header would have the site title and description on top of it and you were able to change the background of it. Well things have changed and advanced to a point that you can use the header in many ways, whereas for Preference, you get to use it as a type of showcase banner for your pages…normally used for the “Front Page” only.

How to Find the WP Header Feature

First, there will be two methods you can work with the WP Header feature:

  1. The first is clicking on the “Header” link in the left panel in your dashboard under “Appearance“. When you are in your dashboard, this is going to be the fastest way of accessing the setup of your header.
  2. The other will be accessing your theme’s customizer by clicking on the text link labeled as “Customize” or when you are in the main Dashboard area (home page of your admin) you will can click on the big blue button labeled as “Customize this site“.

Preparing Your Image(s)

I always recommend people prepare their images before uploading, such as cropping, sizing, and optimization. However, this tutorial is more about getting your images into your showcase header, but the WP Header feature still gives you a reasonably good cropping tool.

For size of images, I recommend using large 1200 pixel wide dimensions so that when the image is cropped and published, you can retain a good quality photo. Please be aware that WordPress does not resize images to be “bigger”, but rather they make them smaller. So if you upload a photo that is 1000 x 800, your photo after cropping for the header will not be resized to 1200 pixels wide. My rule of thumb is the bigger the image, the better.

Adding Your Photo

  1. Go to Appearance >> Header
  2. In the right side window area, click “Choose File” and then “Upload” or you can choose an existing image from your library
  3. You can upload additional images if you wish to have a choice of headers, but it also allows you to have a rotating header each time someone refreshes the screen
  4. Click “Save Changes

Managing Your Header from the Customizer

  1. Go to Appearance >> Themes >> Click on the text link “Customize
  2. Click on the tab labeled as “Header Image
  3. You can change the header image from here by clicking on the small thumbnail you see in the screenshot below, which will then show you existing images
  4. You can change your headers from here as well simply by clicking on any of the thumbnails
  5. If you wish to upload a different photo, you will need to use the other method of managing he headers because WordPress has not made the upload and cropping method available through the Customizer yet.
  6. With any alternate thumbnail choice that you select, click Save & Publish, then Close to get out of the Customizer.

 NOE: When you are in the Header Image tab of the customizer, you may notice some additional settings for colour and padding, but we will cover this in the next setup Tutorial titled “Customize Your Showcase, Banner, and Header Area