Customizer: Header And Background Images

Many WordPress themes allow you to customize the appearance of your website by setting a header and background image. Using the Theme Customizer, you can easily preview the look and feel of using header and background images across your website, and then save the settings as you decide to use them.

Prerequisite Skills

To learn and understand the lesson plan students should:

• Be able to use the WordPress Dashboard
• Be able to install a theme
• Be able to upload images to WordPress

Objectives

• Identify theme requirements for header and background images
• Select images for header and background use
• Use the Customizer to upload images
• Practice previewing header and background image options
• Choose to save and publish header and background options

Assets

• Twenty Sixteen theme
• Twenty Fifteen theme
• catface.jpg
• background-pattern.jpg
• Or their own images
• Or free-to-use or public domain images (MorgueFile is an easy source of free to use images with a simple free license).

Screening Questions

• Are you able to navigate the WordPress Dashboard?
• Are you ready to customize some features of a WordPress theme?
• Can you manage image files and edit their sizes if needed?

Teacher Notes

• Students need to use a sandbox site where they can safely make changes.
• If using a production site, they need to have a backup and restore capability, and they need to understand that they will be modifying the home page of their website.
• The Twenty Sixteen theme works best for setting a Header Image, while the Twenty Fifteen theme works better for a Background Image.
• Describe how web designers and developers toggle between back-end settings and front-end viewing, while the Customizer provides side-by-side panels for both.
• Mention that themes may or may not support these Customizer settings or that they may provide alternative means for them.

Hands-on Walkthrough

Most WordPress themes support custom headers and background images that can be changed using the WordPress theme Customizer. This gives users more control and flexibility over the look of their site without having to implement a child theme and manage theme files manually.

Themes typically include default images for the header and background as examples to display how the theme works. Images may be selected from your existing Media Library collection, or you may upload images to use, which will be added to the Media library.

While you have the ability to customize the theme header and background images with your own images, most themes have a recommended size for the header image specified in pixel dimensions. You’ll need to use a header image that has the right size, and you can prepare the image outside of WordPress or use the Customizer to crop the image to the proper size.

Some themes have a flexible header layout that allows for varying dimensions and aspect ratios that do not need cropping, but you may need to try various image sizes to determine the best fit for the theme.

What is the Customizer?

Typically, designers and developers toggle between back-end coding and front-end viewing in their work.

The WordPress Theme Customizer allows you to change many aspects of the look and feel of your WordPress site, without having to toggle between backend and front end, nor having to modify the code of theme files. You can use the Customizer to preview and modify many of your site’s Appearance settings with ease and safety.

Launch the Theme Customizer

There are two ways to launch the Customizer, from the front end or back end of the WordPress site. On the front end of the site, when you are logged in, you’ll see the Customize icon and link in the Admin bar, which is the toolbar at the top of the website.

To launch the Customizer in the WordPress Dashboard, use Appearance > Customize.

You may also see a big blue Customize Your Site button in the Welcome to WordPress section if that screen option is turned on.

Determine your Theme Support for Header and Background Images

The Header Image is displayed near the top of the layout throughout the website. Most themes support the use of a header image, but each theme will use a specific size and placement for the image. Some themes allow for a Flexible Header that does not need to be a certain size, and some themes provide support for different headers on the home page and other sections of the website.

Does your theme support header and background images? And if so, what size is recommended for the header image? After you launch the Customizer you should see both Header Image and Background Image in the Customizer menu panel, if your theme supports those options. Click on Header Image to open that section.

In the Customizing Header Image section, you’ll see what size is recommended for your theme. With the Twenty Sixteen theme, the WordPress Customizer indicates “your theme recommends a header size of 1200 × 280 pixels.”

Make a note of this size—or whatever size you find for your theme—for the width by height in pixels that will be used for a header image. Notice that nothing is shown under the labels for “Previously uploaded” and for “Suggested,” unless there are existing settings for your theme.

Some themes include default images that will be shown as thumbnails for those items. Depending upon your theme, you may also see options to rotate through multiple headers on your website.

Set a Header Image

Select an image of your own or from a website with free-to-use or public domain images that you will use for your Header Image that is either:

• The exact recommended size for your theme
• Larger than the recommended size, so that it can be cropped

1. Click the “Add new image” button in the Customizing Header Image in the Customizer panel.
2. In the Choose Image dialog select the Upload Files tab.
3. You may either “Drop files anywhere to upload” or click the Select Files button to upload an image from your computer.
4. Enter a short description for the Alt Text after the image is uploaded to the Media library.
5. Click the Select and Crop button.
6. In the Crop Image dialog use, the small square handles to adjust the cropping defined by a dashed line.
   Since the Twenty Sixteen theme allows for a flexible header, the recommended size is the minimum size recommended, and you can crop the image however you like or not at all. WordPress will save a new version of the cropped image, so you will retain the original image that was uploaded.
7. When you are finished adjusting the cropping, click the Crop Image button.
8. You’ll see the results displayed in both the Customizing Header Image panel and the website preview panel.
9. Click the Publish button to save your Header Image setting.

About Background Images

Background images and background colors have long been an aspect of HTML web design. Just as they are named, they appear behind other elements in the layout. While background images can be full-scale pictures, they are more often small images of textured patterns that can be repeated horizontally, vertically, or tiled. The use of background images for web design has changed over time.

While they once were used to give a rich look across an entire website, themes now rarely use that technique. Still, background images are commonly used in CSS layouts for specific effects. Large ‘hero’ images are often used as a background at the top of pages instead of a header.

Background images are also used for automating the placement of small logos and profile portraits for listings and sections. With these types of use, background images may employ CSS or JavaScript for special effects like transparent opacity and masking.

Set a Background Image

Select an image of your own or from a website with free-to-use or public domain images that has a pattern that could be repeated to be used for a Background Image.

1. In the WordPress Customizer, click the Change button for the Active Theme
   
2. Select the Twenty Fifteen theme or another theme you want to use that supports and displays a background image.
3. Click the Save & Activate button.
4. Click the Background Image section of the Customizer panel.
5. Click Select Image, and upload and Choose your image, similar to the Header Image setting.
6. Now that you have a Background Image, you will see the available options. You can Publish the default tiled background or make changes to the options.

There are three basic options for the background image:

• Background Repeat: No Repeat, Tile, Tile Horizontally, or Tile Vertically
• Background Position: Allow image to be positioned Left, Center, or Right
• Background Attachment: Scroll background or display as Fixed

Try changing all of these options to the various settings to preview how they affect the display of the background image, including different combinations of the three options.

When setting the Background Attachment option, you will need to test the preview by scrolling the page in the preview panel. With some options, the image may seem to disappear entirely, but that is due to limited use of the image that is hidden behind another element in the foreground. When you are satisfied with your background image, be sure to Save & Publish your work.

Exercises

Now that you are able to use both header and background images, you can try using various images with various themes to preview the results. You don’t need to Save & Publish your work, as the Customizer allows you to preview the display before you commit to the results. This is an easy way to explore and practice layout techniques.

Twenty Fifteen theme

• Add a header image to the Twenty Fifteen theme.
• Note that this theme requires a vertical ratio for cropping.

Twenty Sixteen theme

• Add a background image to the Twenty Sixteen theme.
• Note that this theme only displays a minimal frame around the content area.

Mobile Display

• Test how header and background images in your themes appear in a mobile view:
  • Simulate Mobile Devices with Device Mode in Google Chrome
  • Manually resize your browser window to a narrow width
• Does the header image stay the same shape?
• Does the header image scale in size for responsive viewing?
• Does the background image still display?

Theme Testing

• As time allows, use the Customizer to preview other themes using header and background images.

Quiz

What is an important reason for using the Customizer for header and background images?

1. WordPress requires use of the Customizer for all themes.
2. Images must be optimized and cropped for use.
3. You can preview the display of settings before publishing your work.
4. Customizer images improve the SEO of a website.

Answer: 3. You can preview the display of settings before publishing your work.

What’s an important practice for selecting and preparing a header image?

1. Change the image file type to a JPG.
2. Determine if your theme recommends a header size.
3. First upload the image to the Media Library.
4. Crop the image before uploading to whatever size you prefer.

Answer: 2. Determine if your theme recommends a header size.

What types of images work best for a background image?

1. The largest possible to display on all possible desktop monitors.
2. GIF format images with a limited color range.
3. Landscape photographs with sunsets.
4. Small images with patterns that can be repeated.

Answer: 4. Small images with patterns that can be repeated.

What happens when you change themes in the Customizer?

1. WordPress saves settings for the prior theme, but doesn’t apply them to the current theme
2. WordPress asks if you want to Save or Publish each of the two themes.
3. Header and background images are removed from the Media Library.
4. You cannot change themes in the Customizer; you must use the Theme Installer.

Answer: 1. WordPress saves settings for the prior theme but doesn’t apply them to the current theme