Theme customizer in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a setting in the WordPress theme customizer.

Wordpress

function mytheme_customize_register($wp_customize) {
    $wp_customize->add_setting('[1]');
}
add_action('customize_register', 'mytheme_customize_register');

Drag options to blanks, or click blank then click option'

Abackground_color

Bheader_textcolor

Cfooter_text

Dsidebar_position

Attempts:

3 left

💡 Hint

Common Mistakes

Using a setting ID that is not a string.

Forgetting to wrap the setting ID in quotes.

The add_setting method requires the setting ID as a string. 'header_textcolor' is a common setting ID used in themes.

2fill in blank

medium

Complete the code to add a control for the setting in the WordPress theme customizer.

Wordpress

function mytheme_customize_register($wp_customize) {
    $wp_customize->add_setting('header_textcolor');
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_textcolor_control', [
        'label' => 'Header Text Color',
        'section' => 'colors',
        'settings' => [1]
    ]));
}
add_action('customize_register', 'mytheme_customize_register');

Drag options to blanks, or click blank then click option'

A'header_textcolor'

B'background_color'

C'footer_text'

D'sidebar_position'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different setting ID than the one added.

Forgetting to wrap the setting ID in quotes.

The control must link to the setting ID it controls. Here, the setting is 'header_textcolor'.

3fill in blank

hard

Fix the error in the code to properly add a text input control in the theme customizer.

Wordpress

function mytheme_customize_register($wp_customize) {
    $wp_customize->add_setting('footer_text');
    $wp_customize->add_control('footer_text_control', [
        'label' => 'Footer Text',
        'section' => 'title_tagline',
        'settings' => [1]
    ]);
}
add_action('customize_register', 'mytheme_customize_register');

Drag options to blanks, or click blank then click option'

A'title_tagline'

B'footer_text_control'

C'footer_text'

D'footer_text_setting'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the control ID instead of the setting ID.

Using the section name instead of the setting ID.

The 'settings' key must refer to the setting ID, which is 'footer_text'. Using the control ID or section name is incorrect.

4fill in blank

hard

Fill both blanks to add a checkbox setting and control in the theme customizer.

Wordpress

function mytheme_customize_register($wp_customize) {
    $wp_customize->add_setting('[1]', [
        'default' => false,
        'sanitize_callback' => 'wp_validate_boolean'
    ]);
    $wp_customize->add_control('[2]', [
        'type' => 'checkbox',
        'label' => 'Show Sidebar',
        'section' => 'sidebar_options',
        'settings' => 'show_sidebar'
    ]);
}
add_action('customize_register', 'mytheme_customize_register');

Drag options to blanks, or click blank then click option'

Ashow_sidebar

Bsidebar_toggle

Csidebar_options

Dshow_sidebar_control

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same string for setting and control IDs.

Using section name as control ID.

The setting ID is 'show_sidebar'. The control ID should be a unique string, here 'show_sidebar_control'.

5fill in blank

hard

Fill all three blanks to add a text setting with a sanitize callback and a control in the theme customizer.

Wordpress

function mytheme_customize_register($wp_customize) {
    $wp_customize->add_setting('[1]', [
        'default' => '',
        'sanitize_callback' => [2]
    ]);
    $wp_customize->add_control('[3]', [
        'type' => 'text',
        'label' => 'Custom Text',
        'section' => 'custom_text_section',
        'settings' => '[1]'
    ]);
}
add_action('customize_register', 'mytheme_customize_register');

Drag options to blanks, or click blank then click option'

Acustom_text

B'sanitize_text_field'

Ccustom_text_control

D'esc_html'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect sanitize callback names.

Using the same string for setting and control IDs.

The setting ID is 'custom_text'. The sanitize callback is 'sanitize_text_field' (without quotes in code, but here as string). The control ID is 'custom_text_control'.