So right now I’m making some major changes in all my themes and was stuck at header images. First I tried to use the following code to set the transport to postMessage but it didn’t work:
$wp_customize->get_setting( 'header_image' )->transport = 'postMessage';
It was still refreshing the page in the Customizer. I tried to search for a solution but it looks like no one ever posted a solution (not on the first page at least), so I tried to resolve it myself.
So I tried to look in the header image control’s file in the core, which is /wp-includes/customize/class-wp-customize-header-image-control.php
And then I tried few things to see what works out and here’s what worked out for me. In the customizer.php file of my theme, I used the following code:
function theme_customize_register($wp_customize) { $wp_customize->get_setting( 'header_image' )->transport = 'postMessage'; $wp_customize->get_setting( 'header_image_data' )->transport = 'postMessage'; } add_action('customize_register', 'theme_customize_register');
And in the JS file, I used this:
( function( $ ) { // Style > Background > Background Image wp.customize( 'header_image', function( value ) { value.bind( function( newval ) { $('.site-header').css( 'background-image', 'url(' +newval+')' ); } ); } ); } )( jQuery );
And it worked for me. I don’t know if it’s the best way to do this or not but it worked for me. Hope it helps you. π
I was looking for this to implement it to WP Logo upload in customizer. Also had no idea how to change backgrounds live. Thanks π
Glad it helped. π