Using WordPress ‘customize_preview_{$this->id}’ PHP action

The customize_preview_{$this->id} WordPress PHP action is fired when the WP_Customize_Setting::preview() method is called for settings not handled as theme_mods or options. The dynamic portion of the hook name, $this->id, refers to the setting ID.


add_action('customize_preview_{$this->id}', 'your_custom_function');
function your_custom_function($setting) {
    // your custom code here


  • $setting (WP_Customize_Setting): The WP_Customize_Setting instance.

More information

See WordPress Developer Resources: customize_preview_{$this->id}


Change color of the header

This code modifies the header color when the setting ID is ‘header_color’.

add_action('customize_preview_header_color', 'change_header_color');
function change_header_color($setting) {
    echo '<style>header { background-color: ' . $setting->value() . '; }</style>';

Adjust font size

This code adjusts the font size when the setting ID is ‘font_size’.

add_action('customize_preview_font_size', 'adjust_font_size');
function adjust_font_size($setting) {
    echo '<style>body { font-size: ' . $setting->value() . 'px; }</style>';

Change background image

This code changes the background image when the setting ID is ‘background_image’.

add_action('customize_preview_background_image', 'change_background_image');
function change_background_image($setting) {
    echo '<style>body { background-image: url(' . $setting->value() . '); }</style>';

Toggle site title visibility

This code toggles the site title visibility when the setting ID is ‘site_title_visibility’.

add_action('customize_preview_site_title_visibility', 'toggle_site_title_visibility');
function toggle_site_title_visibility($setting) {
    $display = $setting->value() ? 'block' : 'none';
    echo '<style>.site-title { display: ' . $display . '; }</style>';

This code modifies the link color when the setting ID is ‘link_color’.

add_action('customize_preview_link_color', 'modify_link_color');
function modify_link_color($setting) {
    echo '<style>a { color: ' . $setting->value() . '; }</style>';