Use wp_add_inline_script()
to export the variable from PHP to JS. For example, in my_styles_method
assuming that your customizr.js
script has the handle my-styles-customize-preview
:
wp_add_inline_script(
'my-styles-customize-preview',
sprintf( 'var MyStylesSelector = %s;', wp_json_encode( $custom_css ) ),
'before'
);
Then you can modify for JS to be:
wp.customize( 'wpt_heading_color', function( value ) {
value.bind( function( newval ) {
$( MyStylesSelector ).css( 'color', newval );
});
});
Nevertheless, I suggest a better approach and that is to update the inline style element instead of setting the style
for each element. For example:
wp.customize( 'wpt_heading_color', function( setting ) {
setting.bind( function( value ) {
$( '#custom-style-inline-css' ).text( MyStylesSelector + '{ color: ' + value + '}' );
});
});
This is also a good candidate for using a custom selective refresh Partial
that short-circuits the partial refresh request to the server and instead handles the rendering client-side by overriding the refresh
method.