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.