Change CSS Variable value in Theme Customizer Live Preview

I am trying to change a CSS Variable value in customizer and couldn’t get live preview working using ‘postMessage’. It works if I use ‘refresh’ option.

Can someone please have a look at the code and point me to the right direction. Thanks.

customizer.php code

/**
* Registers settings and controls with the Customizer.
*
* @param WP_Customize_Manager $wp_customize Customizer object.
*/
function mytheme_customize_register( $wp_customize ) {

$wp_customize->add_setting(
‘primary_color’,
[
‘default’ => ‘#b3000e’,
‘sanitize_callback’ => ‘sanitize_hex_color’,
‘transport’ => ‘postMessage’,
]
);

$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
‘primary_color’,
[
‘label’ => __( ‘Primary Color’, ‘mytheme’ ),
‘section’ => ‘mytheme_color_options’,
]
)
);

}
add_action( ‘customize_register’, ‘mytheme_customize_register’ );

/**
* This will output the custom WordPress settings to the live theme’s WP head.
*
* Used by hook: ‘wp_head’
*
* @see add_action(‘wp_head’,$func)
* @since MyTheme 1.0
*/
function mytheme_customizer_header_output() {

?>
<style type=”text/css”>

:root {
–primary: <?php echo esc_attr( get_theme_mod( ‘primary_color’, ‘#b3000e’ ) ); ?>;
}

</style>
<?php

}
add_action( ‘wp_head’, ‘mytheme_customizer_header_output’ );

/**
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
*/
function mytheme_customize_preview_js() {

wp_enqueue_script( ‘mytheme-customizer-preview-script’, get_stylesheet_directory_uri() . ‘/assets/js/customizer-preview.js’, [ ‘jquery’, ‘customize-preview’ ], 1.0, true );

}
add_action( ‘customize_preview_init’, ‘mytheme_customize_preview_js’ );

customizer-preview.js code

( function( $ ) {

wp.customize(
‘primary_color’,
function ( value ) {
value.bind(
function ( to ) {

//$( ‘a’ ).css( ‘color’, to );
$( ‘:root’ ).css( ‘–primary’, to );

}
);
}
);

} )( jQuery );

Read more here:: Change CSS Variable value in Theme Customizer Live Preview

Leave a Reply

Your email address will not be published. Required fields are marked *