I have set up a set of radio buttons in the customizer to specify one of several different color schemes (aka style sheets) in my theme. When I select a new color for the theme the preview of the theme does not changes. But in another part of the customizer I have a text box. After selecting a color scheme if I go to the text box control and modify it and remove the text cursor, probably causing a change event, then the theme updates and shows the selected color scheme. How can I cause the preview to update when I change the color through the control with the radio buttons?
$wp_customize->add_section('cb_colors_schemes', array(
'title' => __('Color Schemes', 'wpforge'),
'description' => __('Change the color scheme of your theme.', 'wpforge'),
'priority' => 70,
));
$wp_customize->add_setting('cb_color_scheme', array(
'default' => 'blue',
'type' => 'theme_mod',
'transport' => 'postMessage',
'capability' => 'manage_options',
'sanitize_callback' => 'wpforge_sanitize_cs_selection',
'priority' => 4,
));
$wp_customize->add_control('cb_color_scheme', array(
'type' => 'radio',
'label' => 'Color Scheme:',
'section' => 'cb_colors_schemes',
'choices' => array(
'black' => 'Black',
'blue' => 'Blue',
'brown' => 'Brown',
'gray-red' => 'Gray-Red',
'green' => 'Green',
'orange' => 'Orange',
'purple' => 'Purple',
'red' => 'Red',
'taupe' => 'Taupe',
'turqoise' => 'Turqoise',
),
)
);
function wpforge_sanitize_cs_selection( $input ) {
$valid = array(
'black' => 'Black',
'blue' => 'Blue',
'brown' => 'Brown',
'gray-red' => 'Gray-Red',
'green' => 'Green',
'orange' => 'Orange',
'red' => 'Red',
'purple' => 'Purple',
'taupe' => 'Taupe',
'turqoise' => 'Turqoise'
);
if ( array_key_exists( $input, $valid ) ) {
return $input;
} else {
return '';
}
}
JavaScript:
( function( $ ) {
// Header
wp.customize('blogname', function(value) {
value.bind(function(to) {
$('.site-title a').html(to);
});
});
wp.customize('blogdescription', function(value) {
value.bind(function(to) {
$('.site-description').html(to);
});
});
wp.customize('hide_headtxt', function(value) {
value.bind(function(to) {
if( to == '' ) {
$('.site-title, .site-description').css('display', 'none');
}
else if( to == 1 ) {
$('.site-title, .site-description').css('display', 'block');
};
});
});
// Footer
wp.customize('wpforge_footer_text', function(value) {
value.bind(function(to) {
$('.site-info').html(to);
});
});
// Background
wp.customize('wpforge_background_color', function(value) {
value.bind(function(to) {
$('body').css('background-color', to);
if( to == '' ){
$('body').css('background-color', '');
}
});
});
wp.customize('wpforge_background_img', function(value) {
value.bind(function(to) {
$('body').css('background-image', 'url("'+to+'")');
if( to == '' ){
$('body').css('background-image', '');
}
});
});
wp.customize('wpforge_background_repeat', function(value) {
value.bind(function(to) {
$('body').css('background-repeat', to);
if( to == '' ){
$('body').css('background-repeat', '');
}
});
});
wp.customize('wpforge_background_size', function(value) {
value.bind(function(to) {
$('body').css('background-size', to);
if( to == '' ){
$('body').css('background-size', '');
}
});
});
wp.customize('wpforge_background_position', function(value) {
value.bind(function(to) {
$('body').css('background-position', to);
if( to == '' ){
$('body').css('background-position', '');
}
});
});
wp.customize('wpforge_background_attachment', function(value) {
value.bind(function(to) {
$('body').css('background-attachment', to);
if( to == '' ){
$('body').css('background-attachment', '');
}
});
});
// Fonts & Colors
wp.customize('wpforge_title_color', function(value) {
value.bind(function(to) {
$('h1,h2,h3,h4,h5,h6').css('color', to);
if( to == '' ){
$('h1,h2,h3,h4,h5,h6').css('color', '');
}
});
});
wp.customize('wpforge_text_color', function(value) {
value.bind(function(to) {
$('body').css('color', to);
if( to == '' ){
$('body').css('color', '');
}
});
});
wp.customize('wpforge_link_color', function(value) {
value.bind(function(to) {
$('a').css('color', to);
if( to == '' ){
$('a').css('color', '');
}
});
});
wp.customize('wpforge_hover_color', function(value) {
value.bind(function(to) {
$('a:hover').css('color', to);
if( to == '' ){
$('a:hover').css('color', '');
}
});
});
} )( jQuery );
