Theme customizer in Wordpress

Introduction

The Theme Customizer lets you change your WordPress site's look and feel easily. You can see your changes live before saving.

You want to let users change colors or fonts on your site without coding.

You need to add options for site title, logo, or background image.

You want to preview layout changes before making them live.

You want to create a user-friendly way to personalize your theme.

You want to add settings for custom widgets or menus.

Syntax

Wordpress

<?php
function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_section('mytheme_colors', array(
        'title' => __('Colors', 'mytheme'),
        'priority' => 30,
    ));

    $wp_customize->add_setting('header_textcolor', array(
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_textcolor_control', array(
        'label' => __('Header Text Color', 'mytheme'),
        'section' => 'mytheme_colors',
        'settings' => 'header_textcolor',
    )));
}
add_action('customize_register', 'mytheme_customize_register');

The customize_register hook lets you add sections, settings, and controls.

Settings store the value, controls create the UI, and sections group controls.

Examples

This adds a simple text box in the Site Identity section for footer text.

Wordpress

<?php
// Add a text setting and control
$wp_customize->add_setting('footer_text', array(
    'default' => 'My footer text',
    'sanitize_callback' => 'sanitize_text_field',
));
$wp_customize->add_control('footer_text_control', array(
    'label' => __('Footer Text', 'mytheme'),
    'section' => 'title_tagline',
    'settings' => 'footer_text',
    'type' => 'text',
));

This lets users upload a logo image from the customizer.

Wordpress

<?php
// Add an image upload control
$wp_customize->add_setting('logo_image');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'logo_image_control', array(
    'label' => __('Upload Logo', 'mytheme'),
    'section' => 'title_tagline',
    'settings' => 'logo_image',
)));

Sample Program

This code adds a new section called "Colors" in the Theme Customizer. Inside it, there is a setting for the header text color with a color picker control. Users can pick a color and see it live before saving.

Wordpress

<?php
function mytheme_customize_register( $wp_customize ) {
    // Add a section for colors
    $wp_customize->add_section('mytheme_colors', array(
        'title' => __('Colors', 'mytheme'),
        'priority' => 30,
    ));

    // Add a setting for header text color
    $wp_customize->add_setting('header_textcolor', array(
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    // Add a color picker control
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_textcolor_control', array(
        'label' => __('Header Text Color', 'mytheme'),
        'section' => 'mytheme_colors',
        'settings' => 'header_textcolor',
    )));
}
add_action('customize_register', 'mytheme_customize_register');

Important Notes

Always use sanitize_callback to keep user input safe.

Use descriptive labels so users understand what each control does.

Test your customizer options on different screen sizes for accessibility.

Summary

The Theme Customizer lets users change site appearance with live preview.

You add sections, settings, and controls to create options.

Use sanitization and clear labels for a safe and friendly experience.