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

by

The customize_preview_{$this->type} WordPress PHP action fires when the WP_Customize_Setting::preview() method is called for settings not handled as theme_mods or options.

Usage

add_action( 'customize_preview_{your_setting_type}', '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->type}

Examples

Change the site title live preview

Add a live preview for the site title in the customizer.

add_action( 'customize_preview_site_title', 'live_preview_site_title' );

function live_preview_site_title( $setting ) {
  // Use the new site title in the live preview
  echo '<h1>' . esc_html( $setting->value() ) . '</h1>';
}

Change the background color live preview

Add a live preview for the background color in the customizer.

add_action( 'customize_preview_bg_color', 'live_preview_background_color' );

function live_preview_background_color( $setting ) {
  // Apply the new background color in the live preview
  echo '<style>body { background-color: ' . sanitize_hex_color( $setting->value() ) . '; }</style>';
}

Change the font size live preview

Add a live preview for the font size in the customizer.

add_action( 'customize_preview_font_size', 'live_preview_font_size' );

function live_preview_font_size( $setting ) {
  // Apply the new font size in the live preview
  echo '<style>p { font-size: ' . intval( $setting->value() ) . 'px; }</style>';
}

Change the header image live preview

Add a live preview for the header image in the customizer.

add_action( 'customize_preview_header_image', 'live_preview_header_image' );

function live_preview_header_image( $setting ) {
  // Use the new header image in the live preview
  echo '<img src="' . esc_url( $setting->value() ) . '" alt="Header Image">';
}

Change the custom CSS live preview

Add a live preview for custom CSS in the customizer.

add_action( 'customize_preview_custom_css', 'live_preview_custom_css' );

function live_preview_custom_css( $setting ) {
  // Apply the new custom CSS in the live preview
  echo '<style>' . wp_strip_all_tags( $setting->value() ) . '</style>';
}