I develop my custom widget with setting where I can set up custom color for the widget. I use this code to initialize wpColorPicker instead of default text input in form() method of Widget class:

    $('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker();

All works great but if you are trying change the color in Theme Customizer after changing value nothing happens: the Save button still not active and site page not refreshing with the new color.

Previously trying for triggering change event, but not working:

$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker({
    change: function(event, ui) {
        $('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').change();

How to reload the page preview (trigger the event when value inside my input have been changed)?

  • Try using wp.customize.previewer.refresh(); in your JS to refresh to preview. ;) – Aristeides Dec 27 '15 at 22:14
  • 1
    $(this).change(); should be enough to work, but you should throttle it and you're probably running into the confusing WP widget javascript initialization issue anyway - see wordpress.stackexchange.com/a/212676/57034 for a working example using wpColorPicker... – bonger Dec 28 '15 at 20:36
  • @Aristeides wp.customize.previewer.refresh(); refreshing works, but WordPress still ignoring my new values in wpColorPicker inputs (they've updating via JS and this point is an issue with Customizer). – Kolya Korobochkin Jan 2 '16 at 20:53
  • @KolyaKorobochkin Try something like this: github.com/aristath/kirki/blob/2.0.5/assets/js/controls/… The colorpicker may need a delay... at least that's what worked for me. Different use-case, same(-ish) problem. – Aristeides Jan 3 '16 at 0:28
  • 1
    @bonger Thank you. Your solution rocks and works :) – Kolya Korobochkin Jan 3 '16 at 13:24

Try using the existing WordPress function to modify color palette like:

function my_mce4_options( $init ) {
    $default_colours = '
        "000000", "Black",
        "993300", "Burnt orange",
        "333300", "Dark olive",
        "003300", "Dark green",
        "003366", "Dark azure",
        "000080", "Navy Blue",
        "333399", "Indigo",
        "333333", "Very dark gray",
        "800000", "Maroon",
        "FF6600", "Orange",
        "808000", "Olive",
        "008000", "Green",
        "008080", "Teal",
        "0000FF", "Blue",
        "666699", "Grayish blue",
        "808080", "Gray",
        "FF0000", "Red",
        "FF9900", "Amber",
        "99CC00", "Yellow green",
        "339966", "Sea green",
        "33CCCC", "Turquoise",
        "3366FF", "Royal blue",
        "800080", "Purple",
        "999999", "Medium gray",
        "FF00FF", "Magenta",
        "FFCC00", "Gold",
        "FFFF00", "Yellow",
        "00FF00", "Lime",
        "00FFFF", "Aqua",
        "00CCFF", "Sky blue",
        "993366", "Brown",
        "C0C0C0", "Silver",
        "FF99CC", "Pink",
        "FFCC99", "Peach",
        "FFFF99", "Light yellow",
        "CCFFCC", "Pale green",
        "CCFFFF", "Pale cyan",
        "99CCFF", "Light sky blue",
        "CC99FF", "Plum",
        "FFFFFF", "White"
    $custom_colours = '
        "e14d43", "Color 1 Name",
        "d83131", "Color 2 Name",
        "ed1c24", "Color 3 Name",
        "f99b1c", "Color 4 Name",
        "50b848", "Color 5 Name",
        "00a859", "Color 6 Name",
        "00aae7", "Color 7 Name",
        "282828", "Color 8 Name"
    $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
    $init['textcolor_rows'] = 6; // expand colour grid to 6 rows
    return $init;
add_filter('tiny_mce_before_init', 'my_mce4_options');

I hope this helps you out!

| 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.