Use the WordPress Header for Images

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 Encounters, 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 1170 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 1170 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.

 Header Options

When you are in the Header Image tab of the customizer, you may notice some additional settings for colour and padding:

The first two will style the background colours for the showcase banner area where your image will show up. For example, the default front-end styling will look like this screenshot snippet…notice the two outer containers:

The other setting is the Showcase Padding. This will increase spacing around your image and show the background colour of your showcase area. You will see that there are two values of 15px 70px showing. This means there will be a 15 pixel space on the top and bottom with a 70 pixel space on the left and right side of your image. Another way of doing this would be like this:

15px 70px 15px 70px

However, you can change this to your own preference.