While learning custom WordPress theme development, today I explored an important feature called the Theme Customizer.

The WordPress Customizer allows users to change theme settings and preview changes live before publishing them.

Today I learned:

• How to add options in Theme Customizer
• How to add custom logo support
• How to change footer text
• How to add background color using color picker
• How to use Google Font family options
• What is Runtime Refresh
• What is Selective Refresh

In this blog post, I’ll explain everything in a simple beginner-friendly way.

---

What is Theme Customizer?

The Theme Customizer is a built-in WordPress feature that helps users customize the website design visually.

You can access it from:

Dashboard → Appearance → Customize

Using the customizer, users can change settings like:

• Logo
• Colors
• Fonts
• Footer text
• Site title
• Menus
• Widgets

without editing code directly.

---

How to Add Customizer Options

Customizer settings are usually added inside:

functions.php

We use:

$wp_customize

to create settings and controls.

---

1. Adding Footer Text Option

Step 1: Add Setting & Control

Inside functions.php:

function mytheme_customize_register($wp_customize) {

    $wp_customize->add_section('footer_section', array(
        'title' => 'Footer Settings',
    ));

    $wp_customize->add_setting('footer_text', array(
        'default' => 'Copyright My Website',
    ));

    $wp_customize->add_control('footer_text', array(
        'label' => 'Footer Text',
        'section' => 'footer_section',
        'type' => 'text',
    ));

}

add_action('customize_register', 'mytheme_customize_register');

---

Step 2: Display Footer Text

Inside footer.php:

<?php echo get_theme_mod('footer_text'); ?>

Now users can change footer text directly from the customizer.

---

2. Adding Custom Logo Support

WordPress provides built-in logo support.

Inside functions.php:

function mytheme_setup() {

    add_theme_support('custom-logo');

}

add_action('after_setup_theme', 'mytheme_setup');

---

Display Logo

Inside header.php:

<?php the_custom_logo(); ?>

Now users can upload a logo from the customizer.

---

3. Adding Background Color Picker

Color picker helps users choose colors visually.

---

Add Color Setting

Inside functions.php:

$wp_customize->add_setting('background_color', array(
    'default' => '#ffffff',
));

---

Add Color Control

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'background_color',
        array(
            'label' => 'Background Color',
            'section' => 'colors',
        )
    )
);

---

Use Color in Theme

Inside header.php or style.php:

<style>
body {
    background-color: <?php echo get_theme_mod('background_color'); ?>;
}
</style>

Now users can change background color live.

---

4. Adding Google Font Family Option

We can also allow users to select font families.

---

Add Font Setting

$wp_customize->add_setting('google_font', array(
    'default' => 'Arial',
));

---

Add Dropdown Control

$wp_customize->add_control('google_font', array(
    'label' => 'Font Family',
    'section' => 'title_tagline',
    'type' => 'select',
    'choices' => array(
        'Arial' => 'Arial',
        'Roboto' => 'Roboto',
        'Poppins' => 'Poppins',
    ),
));

---

Apply Font

<style>
body {
    font-family: <?php echo get_theme_mod('google_font'); ?>;
}
</style>

This makes the theme more customizable.

---

Runtime Refresh in Customizer

Runtime Refresh means the preview updates automatically whenever settings change.

Example:

• Changing text
• Updating colors
• Changing fonts

The page refreshes instantly in preview mode.

This helps users see changes live.

---

Selective Refresh in Customizer

Selective Refresh updates only a specific part of the page instead of reloading the whole page.

For example:

• Footer text updates only in footer area
• Site title updates only in header

This makes customization faster and smoother.

---

Example of Selective Refresh

$wp_customize->selective_refresh->add_partial(
    'footer_text',
    array(
        'selector' => '.site-footer',
    )
);

Now only the footer section refreshes.

---

Why Theme Customizer is Important

Theme customizer makes themes:

• User-friendly
• Flexible
• Professional
• Easy to manage

Users can customize websites without touching code.

---

What I Learned Today

Today I learned:

• How to add customizer settings
• How to create controls
• How to add logo support
• How to use color picker
• How to add font options
• Difference between runtime refresh and selective refresh

These features help create dynamic and modern WordPress themes.

---

Final Thoughts

The WordPress Customizer is one of the best features for theme developers.

At first, $wp_customize may look difficult, but after practicing small settings like colors and footer text, it becomes easier.

The more options you create, the more flexible your theme becomes.

Practice regularly and try creating:

• Typography settings
• Header options
• Button colors
• Layout settings

This is how professional WordPress themes are built.

Happy Coding 🚀