Theme Customizer (User)
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.
Target Audience
Who is this lesson intended for? What interests/skills would they bring? Choose all that apply.
- Users
- Designers
- Developers
- Speakers
- All
Experience Level
How much experience would a participant need to get the most from this lesson?
- Beginner
- Intermediate
- Advanced
- Any
Type of Instruction
Which strategies will be used for this lesson plan? Choose all that apply.
- Demonstration
- Discussion
- Exercises
- Feedback
- Lecture (Presentation)
- Show & Tell
- Tutorial
Time Estimate (Duration)
How long will it take to teach this lesson (in minutes)?
____ minutes
Prerequisite Skills
Participants will get the most from this lesson if they have familiarity with:
- The WordPress Dashboard.
- Are able to install a theme.
Readiness Questions
- Are you familiar with the WordPress Dashboard?
- Can you install a WordPress theme?
Slides
- Slides (files included in this repo)
Materials Needed
Notes for the Instructor
- 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.
Lesson Outline
- First do this
- Then move on to this
- Finish with this
The plan for the lesson. Outline form works well.
For example:
- Talk about what a theme is
- Demonstrate how to install and activate a theme
- Practice exercises to have participants find and install a theme on their own site
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
Assessment
Where can you find the Customizer?
- On each Post/Page
- In the site Settings
- Under your Profile
- Under the Appearance menu
Answer: 4. Under the Appearance menu
All themes can be modified using the Customizer.
- Yes
- 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.
- Yes
- No
Answer: 2. No. (Each theme, and some plugins, determines which options appear in the customizer.)
Additional Resources
- Theme Customization API @Codex
- WordPress Widgets @Codex
- Appearance Widgets Screen @Codex
- Creating a Favicon @Codex
Example Lesson
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. 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. 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.
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. 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.