Theme customizer in Wordpress - Step-by-Step Execution

Concept Flow - Theme customizer

Open WordPress Admin

↓

Go to Appearance > Customize

↓

Customizer Panel Loads

↓

User Changes Settings

↓

Preview Updates Live

↓

User Clicks Publish

↓

Settings Saved to Database

↓

Theme Reflects Changes on Site

The flow shows how a user opens the customizer, changes settings, previews live updates, and saves changes that update the theme.

Execution Sample

Wordpress

<?php
function mytheme_customize_register($wp_customize) {
  $wp_customize->add_setting('background_color', ['default' => '#ffffff']);
  $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'background_color_control', ['label' => 'Background Color', 'section' => 'colors', 'settings' => 'background_color']));
}
add_action('customize_register', 'mytheme_customize_register');

This code adds a background color setting and control to the WordPress theme customizer.

Execution Table

Step	Action	Customizer State	Preview Update	Database Save
1	Open Customizer	Customizer panel loads with default settings	Site preview shows current theme	No save yet
2	Add background_color setting	Setting 'background_color' added with default '#ffffff'	No change yet	No save yet
3	Add color control linked to setting	Control appears in 'Colors' section	No change yet	No save yet
4	User selects new color '#ff0000'	Setting value changes to '#ff0000'	Preview background updates to red	No save yet
5	User clicks Publish	Setting value '#ff0000' confirmed	Preview locked with new color	Value saved to database
6	Customizer closes	Settings saved	Site shows red background color	Save complete

💡 Customizer closes after user publishes changes, saving settings to database and updating site.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
background_color	#ffffff (default)	#ffffff	#ff0000 (user changed)	#ff0000 (saved)

Key Moments - 2 Insights

Why does the preview update immediately when I change a setting but the site doesn't change until I publish?

The preview shows live changes for you to see before saving. The actual site updates only after you click Publish, as shown in steps 4 and 5 of the execution_table.

What happens if I close the customizer without publishing?

Changes are not saved to the database, so the site stays the same. The preview updates are temporary until you publish, as seen in the exit_note.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'background_color' after step 4?

A "#000000"

B "#ffffff (default)"

C "#ff0000 (user changed)"

D "Not set yet"

💡 Hint

Check the 'Customizer State' column at step 4 in the execution_table.

At which step does the background color get saved to the database?

A Step 3

B Step 5

C Step 2

D Step 6

💡 Hint

Look at the 'Database Save' column in the execution_table.

If the user changes the color but does not click Publish, what happens to the site background color?

A It stays the same until Publish is clicked

B It changes immediately on the live site

C It resets to default automatically

D It changes only after closing the customizer

💡 Hint

Refer to the key_moments section and the exit_note in execution_table.

Concept Snapshot

Theme Customizer in WordPress:
- Access via Appearance > Customize
- Add settings and controls with customize_register hook
- Changes preview live but save only on Publish
- Settings saved in database update the theme
- Use controls like WP_Customize_Color_Control for UI

Full Transcript

The WordPress Theme Customizer lets users change theme settings with live preview. When you open it, the customizer panel loads with current settings. Developers add settings and controls using the customize_register hook. When a user changes a setting, the preview updates immediately but the actual site changes only after clicking Publish. Saving writes the new settings to the database, updating the live site. If the user closes without publishing, changes are lost. This flow helps users safely customize their site appearance.

Practice

1. What is the main purpose of the WordPress Theme Customizer?

easy

A. To manage user roles and permissions

B. To install new plugins automatically

C. To allow users to change site appearance with a live preview

D. To create new posts and pages

Solution

1. Step 1: Understand the role of the Theme Customizer

   The Theme Customizer is designed to let users modify the look and feel of their site and see changes immediately.

2. Step 2: Compare options with this purpose

   Options B, C, and D relate to plugins, user management, and content creation, which are not the Customizer's function.

3. Final Answer:

   To allow users to change site appearance with a live preview -> Option C

4. Quick Check:

   Theme Customizer = live preview appearance changes [OK]

Hint: Customizer = live preview for appearance changes [OK]

Common Mistakes:

• Confusing Customizer with plugin installer
• Thinking it manages users or content
• Assuming it edits posts directly

2. Which function is used to add a new section in the WordPress Theme Customizer?

easy

A. add_section()

B. add_control()

C. add_setting()

D. register_section()

Solution

1. Step 1: Identify the function for adding sections

   The function add_section() is specifically used to add a new section in the Theme Customizer.

2. Step 2: Differentiate from other functions

   add_setting() adds settings, add_control() adds controls, and register_section() is not a valid function.

3. Final Answer:

   add_section() -> Option A

4. Quick Check:

   Section addition = add_section() [OK]

Hint: Sections use add_section(), settings use add_setting() [OK]

Common Mistakes:

• Using add_setting() to add sections
• Confusing add_control() with add_section()
• Using non-existent register_section()

3. Given this code snippet in a Theme Customizer setup:

 $wp_customize->add_setting('header_text', [
  'default' => 'Welcome!',
  'sanitize_callback' => 'sanitize_text_field'
]);
$wp_customize->add_control('header_text', [
  'label' => 'Header Text',
  'section' => 'title_tagline',
  'type' => 'text'
]);

What will get_theme_mod('header_text') return if the user has not changed the setting?

medium

A. An empty string

B. null

C. An error message

D. 'Welcome!'

Solution

1. Step 1: Check the default value in add_setting()

   The setting 'header_text' has a default value of 'Welcome!'.

2. Step 2: Understand get_theme_mod behavior

   If the user has not changed the setting, get_theme_mod() returns the default value.

3. Final Answer:

   'Welcome!' -> Option D

4. Quick Check:

   Default value returned by get_theme_mod() = 'Welcome!' [OK]

Hint: get_theme_mod returns default if no user change [OK]

Common Mistakes:

• Assuming it returns null if unset
• Expecting empty string instead of default
• Thinking it throws an error without user input

4. Identify the error in this Theme Customizer code snippet:

 $wp_customize->add_setting('footer_text', [
  'default' => 'Footer here',
  'sanitize_callback' => 'sanitize_text_field'
]);
$wp_customize->add_control('footer_text', [
  'label' => 'Footer Text',
  'section' => 'footer_section',
  'type' => 'textarea'
]);

Assuming 'footer_section' was never added, what issue will occur?

medium

A. The control will not display because the section does not exist

B. The setting will fail to save user input

C. The sanitize_callback will cause a fatal error

D. The default value will be ignored

Solution

1. Step 1: Check if the section exists

   The control references 'footer_section', but this section was never added with add_section().

2. Step 2: Understand control behavior without a valid section

   Controls must belong to existing sections; otherwise, they won't display in the Customizer UI.

3. Final Answer:

   The control will not display because the section does not exist -> Option A

4. Quick Check:

   Control needs valid section to display = true [OK]

Hint: Controls need existing sections to show [OK]

Common Mistakes:

• Assuming setting fails to save without section
• Thinking sanitize_callback causes error here
• Believing default value is ignored

5. You want to add a color picker in the Theme Customizer for the site background color. Which sequence of actions is correct?

hard

A. Use add_control() first, then add_setting(), then add_section()

B. Use add_setting() with default color, add_section() for background, then add_control() with type 'color'

C. Only add_setting() is needed with type 'color'

D. Add_section() with type 'color', then add_setting(), then add_control()

Solution

1. Step 1: Add a section for background settings

   First, create a section using add_section() to group background options.

2. Step 2: Add a setting with a default color

   Use add_setting() to define the background color setting and provide a default value.

3. Step 3: Add a color picker control linked to the setting and section

   Use add_control() with type => 'color' to let users pick a color.

4. Final Answer:

   Use add_setting() with default color, add_section() for background, then add_control() with type 'color' -> Option B

5. Quick Check:

   Section, setting, control in order with color type [OK]

Hint: Add section, then setting, then color control [OK]

Common Mistakes:

• Adding control before section or setting
• Skipping add_section()
• Using wrong control type for color picker