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.
Usage
add_action('customize_preview_{$this->id}', 'your_custom_function');
function your_custom_function($setting) {
// your custom code here
}
Parameters
$setting(WP_Customize_Setting): The WP_Customize_Setting instance.
More information
See WordPress Developer Resources: customize_preview_{$this->id}
Examples
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>';
}
Modify link color
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>';
}