theme customizer - How do I update the wpColorPicker palette after initialization?

admin管理员组

文章数量:1122832

Once the customizer color picker is initialized, how can the color palette be updated? The palette can be set through the js options before it's initialized using something like:

jQuery.wp.wpColorPicker.prototype.options.palettes = ["#303f9f", "#5c6bc0", "#e8eaf6", "#ffffff"];

Updating the options after the picker is initialized has no effect on the palettes. I'm guessing the picker needs to be reinitialized but can't seem to figure out how to do that inside of the customizer using wpColorPicker.

Once the customizer color picker is initialized, how can the color palette be updated? The palette can be set through the js options before it's initialized using something like:

jQuery.wp.wpColorPicker.prototype.options.palettes = ["#303f9f", "#5c6bc0", "#e8eaf6", "#ffffff"];

Updating the options after the picker is initialized has no effect on the palettes. I'm guessing the picker needs to be reinitialized but can't seem to figure out how to do that inside of the customizer using wpColorPicker.

• theme-customizer
• color-picker

Share Improve this question asked Apr 22, 2020 at 16:25 EHermanEHerman 99922 gold badges1616 silver badges3333 bronze badges 1

• Did you ever figure out? I'm in the same situation. – Gerard Reches Commented Feb 1, 2024 at 16:26

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This answer doesn't directly respond the question, as what I'm going to explain doesn't work after initialization but it's rather about how to avoid finding yourself in that situation.

I came across this question because I was having difficulties with that same code working and this was the solution I found.

The provided code works with no issues:

jQuery.wp.wpColorPicker.prototype.options.palettes = ["#303f9f", "#5c6bc0", "#e8eaf6", "#ffffff"];

However, this needs to be executed before any instance of

jQuery('.color-picker').wpColorPicker();

or it will have no effect.

While some plugins/themes might make it impossible in some way, what you want to do is to make sure that your code is executed before the initialization, but it has to be after the wp-color-picker has loaded.

We can use the function wp_add_inline_script() to make sure that our JS code is added right after the wp-color-picker script is loaded.

public function replace_wp_color_picker_palette () {
    // You may have your color array in PHP format.
    $colors = array( "#303f9f", "#5c6bc0", "#e8eaf6", "#ffffff" );

    // In that case you need to encode the array as json.
    $palette = wp_json_encode( $colors );

    // Enqueue wp-color-picker
    wp_enqueue_script( 'wp-color-picker', deps: 'jquery' );

    // Add our code right after the wp-color-picker script.
    wp_add_inline_script(
        handle: 'wp-color-picker',
        data: "jQuery.wp.wpColorPicker.prototype.options.palettes = {$palette};",
        position: 'after',
    );
}

add_action( 'admin_enqueue_scripts', 'replace_wp_color_picker_palette', 5 );

Note: This is PHP 8.1 syntax using named parameters for clarity, but you can just removed them.

This has to happen only in admin (I assume you are not using the color picker in the frontend) so we hook it to admin_enqueue_scripts and we set a high priority.

Just make sure that the priority is high enough so that the action is executed before any other action containing the initialization code.

It's very important to notice that we should run the code immediately and not to wait for the DOM to be ready, because it's likely that once that happens the wpColorPicker will be initialized somewhere and we'll have lost our chance to replace the palette.

本文标签： theme customizerHow do I update the wpColorPicker palette after initialization