I am trying to run some custom jquery function every time the colorpicker’s color change. The colorpicker is include as part of the WP core. I have been looking at the JS code, but I can’t figure out what’s the trigger that updates the color.

I have tried listening for several classes, and also listening for changes on the text input (the one that holds the color hex value), but no luck.

Has anyone done this before?

2 Answers
2

I hate answering my own question, but hopefully this can help someone else with similar issues:

WordPress uses Iris color picker.
http://automattic.github.io/Iris/#

WordPress also creates a jquery widget with default settings for Iris.
The file can be found under wp-admin/js/color-picker.js

At first I was trying to pass values directly to iris(), which works, but that overrides the wordpress widget.

Once I found out about the widget, I wrote the following:

$(".wp-color-picker").wpColorPicker(
  'option',
  'change',
  function(event, ui) {
    //do something on color change here
  }
);

The wpColirPicker accepts a custom function for the change event. So it runs first the default actions and then it allows you to add your own.

Leave a Reply

Your email address will not be published. Required fields are marked *