Use the New WordPress 3.5 Color Picker in a Plugin

One of the many new features in WordPress 3.5 is the Iris color picker.  Iris replaces the, now deprecated, Farbtastic color picker script.  The new Iris color picker is shown off in the Theme Customizer for the Twenty-Twelve theme.

As soon as I saw Iris, I fell in love. She is user-friendly, colorful and fun. I found that implementing the new color picker is very similar to Farbtastic.

Iris Color Picker Demo Plugin

To use the Iris color picker in a plugin requires:

  1. Running a version of WordPress that is 3.5 Beta or higher.
  2. Loading the ‘wp-color-picker’ script and style into your plugin options page.
  3. Adding a text input for your color value to your plugin options page.
  4. Writing a custom jQuery script to call Iris’s wpColorPicker method on your color text input field(s).

How does the code look for implementing steps 2-4?
I created a demonstration plugin to help answer that. The plugin doesn’t do anything itself, it is intended as a guide for developers interested in using the new Iris color picker in a WordPress plugin.

View on Github

Iris Color Picker Demo Plugin

2 thoughts on “Use the New WordPress 3.5 Color Picker in a Plugin”

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>