Theme Customizer

Description Description

In this lesson you will learn that the Theme Customizer provides a centralized place to change options that control the look of your WordPress site. This lesson covers how to locate and use the Customizer and the options that it includes.

Objectives

After completing this lesson, you will be able to:

  • Locate the Customizer in the WordPress Dashboard.
  • Demonstrate how to open and close the Customizer.
  • Show how to update items using the Customizer, such as site colors or widgets.
  • Use the Customizer to save changes.

Prerequisite Skills

You will be better equipped to work through this lesson if you have experience in and familiarity with:

Assets

 

Top ↑

Screening Questions Screening Questions

  • Are you familiar with the WordPress Dashboard?
  • Can you install a WordPress theme?

 

Top ↑

Teacher Notes Teacher Notes

  • Students should have a sandbox site (preferably a local site, but it could be a non-critical site on a server) that they can make changes to during the lesson.
  • Feel free to change the example color scheme and text that are included in the lesson.

 

Top ↑

Hands-on Walkthrough Hands-on Walkthrough

What is the Customizer? What is the Customizer?

The Customizer is a relatively recent addition to WordPress that allows you to change several aspects of your WordPress site from one area.

WordPress customizer screen in the dashboard

You can access it using the Customize option in the Appearance menu or possibly the big, blue Customize Your Site button in the WordPress Dashboard, if you haven’t dismissed the Welcome to WordPress! box.

WordPress customer location in the menu

Each theme can choose to either use or not use the Customizer. It can also add to, subtract from, or otherwise change the Customizer to suit its purposes. Some things that are commonly found in the Customizer are sections to change colors, typography, widgets, menus, and a handful of general site settings. Even plugins can add or subtract things that appear in the Customizer.

Top ↑

Using the Customizer Using the Customizer

To use the Customizer, click on the section that you are interested in such as Colors. What appears in the Customizer panel will then change to display the controls that are available. You can change the settings as desired and you should see the results of your changes in the preview screen without having to refresh the page.

Screenshot 2015-12-14 19.06.44

In Twenty Fifteen, you have the option to pick a color scheme or completely choose your own colors using a color picker.

You can move back and forth between panels in the Customizer without losing your changes. For example, once you choose your colors, you can move to the Header Image section (or Widgets, Menus, etc.) and continuing editing. The preview screen will continue to update in real time. Once you like what you see, you will need to click the blue Save & Publish button at the top of the panel to save your work.

To close the Customizer panel, click the X at the top left of the Customizer panel. You will be taken to the last screen you were on before you went to the Customizer.

 

Top ↑

Exercises Exercises

Exercise: Explore the Customizer

  • With the Twenty Fifteen theme installed, open the Customizer.
  • Click on each of the sections on the Customizer panel to see which controls are available.

Exercise: Change the Site Colors

  • Using the Customizer for the Twenty Fifteen theme, go to the Colors section and change the Base Color Scheme to purple.
  • Change the Header and Sidebar Text Color to #81d742.
  • Save your changes

Exercise: Add Text to the Sidebar

  • Using the Customizer for the Twenty Fifteen theme, go to the Widget section and add a Text widget to the Sidebar widget area.
  • Insert a title and content in the Text widget (e.g., title = “About Me”, content=”I am awesome!”).
  • Save your changes

 

Top ↑

Quiz Quiz

Where can you find the Customizer?

  1. On each Post/Page
  2. In the site Settings
  3. Under your Profile
  4. Under the Appearance menu

Answer:  4. Under the Appearance menu

All themes can be modified using the Customizer.

  1. Yes
  2. No

Answer:  2. No. (Older themes may not support it, however it is required for all newly created themes available from WordPress.org/themes.)

All themes have the same options in the Customizer.

  1. Yes
  2. No

Answer:  2. No. (Each theme, and some plugins, determines which options appear in the customizer.)

 

Top ↑

Additional Resources Additional Resources

  1. Theme Customization API @Codex
  2. WordPress Widgets @Codex
  3. Appearance Widgets Screen @Codex
  4. Creating a Favicon @Codex