Theme customizer in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this WordPress Theme Customizer code?

Consider this code snippet added to functions.php to add a color setting and control in the Theme Customizer. What will the user see in the Customizer panel?

Wordpress

<?php
function mytheme_customize_register($wp_customize) {
  $wp_customize->add_setting('header_textcolor', [
    'default' => '#000000',
    'transport' => 'refresh',
  ]);
  $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_textcolor_control', [
    'label' => __('Header Text Color', 'mytheme'),
    'section' => 'colors',
    'settings' => 'header_textcolor',
  ]));
}
add_action('customize_register', 'mytheme_customize_register');
?>

A A text input labeled 'Header Text Color' appears under the 'Colors' section in the Customizer.

B No new control appears because 'transport' is set to 'refresh'.

C An error occurs because 'header_textcolor' is a reserved setting name.

D A new color picker labeled 'Header Text Color' appears under the 'Colors' section in the Customizer.

💡 Hint

Think about what WP_Customize_Color_Control does and where it appears.

The code adds a color setting with a default black color and a color picker control labeled 'Header Text Color' inside the existing 'Colors' section. The 'transport' => 'refresh' means the preview reloads on change but does not affect control visibility.

❓ state_output

intermediate

What is the value of the setting after this Customizer interaction?

Suppose the Theme Customizer has a setting 'background_color' with default '#ffffff'. The user changes it to '#ff0000' but does not click 'Publish'. What is the value of get_theme_mod('background_color') when accessed in the front-end?

A '#ffffff' (the default value)

B null because the setting is not saved yet

C '#ff0000' (the new value the user selected)

D An error because the setting is not published

💡 Hint

Remember when changes in the Customizer become active on the live site.

Changes in the Customizer are previewed but not saved until the user clicks 'Publish'. Until then, get_theme_mod returns the saved value, which is the default '#ffffff'.

📝 Syntax

advanced

Which option correctly adds a live preview for a text setting in the Theme Customizer?

You want to add a setting 'footer_text' that updates live in the preview without page reload. Which code snippet correctly sets this up?

A

$wp_customize->add_setting('footer_text', ['default' => '', 'transport' => 'live']);
$wp_customize->add_control('footer_text', ['label' => 'Footer Text', 'section' => 'title_tagline']);

B

$wp_customize->add_setting('footer_text', ['default' => '', 'transport' => 'refresh']);
$wp_customize->add_control('footer_text', ['label' => 'Footer Text', 'section' => 'title_tagline']);

C

$wp_customize->add_setting('footer_text', ['default' => '', 'transport' => 'postMessage']);
$wp_customize->add_control('footer_text', ['label' => 'Footer Text', 'section' => 'title_tagline']);

// JS listens for changes and updates footer text live.

D

$wp_customize->add_setting('footer_text', ['default' => '']);
$wp_customize->add_control('footer_text', ['label' => 'Footer Text', 'section' => 'title_tagline']);

💡 Hint

Look for the transport method that enables JavaScript live preview.

Setting 'transport' to 'postMessage' enables JavaScript to update the preview instantly without reload. 'refresh' reloads the preview. 'live' is not a valid transport value.

🔧 Debug

advanced

Why does this Customizer control not appear in the panel?

This code is added to functions.php but the control does not show in the Customizer. What is the cause?

Wordpress

<?php
function mytheme_customize_register($wp_customize) {
  $wp_customize->add_setting('sidebar_position', [
    'default' => 'right',
    'transport' => 'refresh',
  ]);
  $wp_customize->add_control('sidebar_position_control', [
    'label' => __('Sidebar Position', 'mytheme'),
    'section' => 'layout',
    'settings' => 'sidebar_position',
    'type' => 'radio',
    'choices' => [
      'left' => 'Left',
      'right' => 'Right'
    ],
  ]);
}
add_action('customize_register', 'mytheme_customize_register');
?>

A The 'layout' section does not exist by default, so the control is not displayed.

B The control ID 'sidebar_position_control' must match the setting ID 'sidebar_position'.

C The 'choices' array keys must be integers, not strings.

D The 'type' => 'radio' is invalid; it should be 'select'.

💡 Hint

Check if the section you add the control to exists by default.

The 'layout' section is not a default section in the Customizer. Controls must be added to existing sections or you must add the section first. Since 'layout' does not exist, the control is not shown.

🧠 Conceptual

expert

Which statement about the Theme Customizer's selective refresh is true?

Selective refresh allows parts of the preview to update without a full reload. Which of these statements is correct about how to implement selective refresh for a setting?

A Selective refresh works automatically for all settings with 'transport' => 'refresh' without extra code.

B You register a partial with <code>$wp_customize->selective_refresh->add_partial()</code> specifying the selector and a render callback.

C Selective refresh requires setting 'transport' => 'postMessage' and no PHP render callback.

D Selective refresh is deprecated and replaced by live preview with JavaScript only.

💡 Hint

Think about how selective refresh targets specific parts of the preview.

Selective refresh requires registering a partial with a CSS selector and a PHP render callback to update only that part of the preview. It works with 'refresh' transport but needs explicit partial registration.

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