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? Put an "x" in the brackets for all that apply.

• Users / Content Writers
• Designers
• Developers
• Speakers
• Organizers
• Kids

Experience Level

How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.

• Beginner
• Intermediate
• Advanced

Type of Instruction

Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.

• Demonstration
• Discussion
• Exercises
• Feedback
• Lecture (Presentation)
• Slides
• Show & Tell
• Tutorial

Time Estimate (Duration)

How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.

• 1 hour or less
• 2-4 hours (half-day)
• 5-8 hours (full-day)
• 2 days
• 3 days or more

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

• Twenty Fifteen theme

Notes for the Presenter

• 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

• Talk about what Customizer is.
• Show where to find Customizer and how to open it.
• Practice exercises to have participants explore the customizer, change site colours and add text to the sidebar.
• Show how to save changes in customizer.

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?

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.)  

What items could you update with the Customizer?

1. Site's content
2. Items like colours, widgets, header image, background image
3. Users
4. Plugins

Answer: 2. Items like colours, widgets, header image, background image

All changes you do on Customizer are being reflected on your site immediately.

1. Yes, when I change something on customizer, it reflects right away on the site.
2. No, unless I hit "Publish" nothing is being changed.

Answer: 2. No, unless I hit "Publish" nothing is being changed.

Additional Resources

1. Theme Customization API @Codex
2. WordPress Widgets @Codex
3. Appearance Widgets Screen @Codex
4. 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.  

Lesson Wrap Up

Follow with the Exercises and Assessment outlined above.