1

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 );
  • Can you post your jS? – Dan Dec 9 '14 at 21:42
  • Ah, good idea. Since I did not write this I did not know there was some JavaScript related to this code. I added the JS code. – AlanP Dec 10 '14 at 12:09
  • At first glance I wonder if this isn't working because there doesn't seem to be jS for "cb_color_scheme", and also, is that input actually properly assigned to a section? Sadly I don't have much time to help, but that's where I'd start! – Dan Dec 10 '14 at 12:44
  • Yes, what javascript needs to be added to request refresh after cb_color_scheme change? – AlanP Dec 11 '14 at 11:36
1

The answer is very simple. Change the transport property to refresh:

$wp_customize->add_setting('cb_color_scheme', array(
  'default' => 'blue',
  'type' => 'theme_mod',
  'transport' => 'refresh', 
  'capability' => 'manage_options',
  'sanitize_callback' => 'wpforge_sanitize_cs_selection',
  'priority' => 4,      
));
| improve this answer | |
0

Actually the default is refresh, so there is no need to have

'transport' => 'refresh',
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.