Color Selection in WordPress: Iris Color Picker

Since version 3.5, the color selection script in WordPress has been changed from Farbtastic to Iris. The feature of this script is that it uses CSS3 gradients in its code, so the palette, among other advantages, is displayed perfectly on HiDPI (Retina) screens. In this article, I will show how to connect and use the native WordPress script for color selection in the admin panel when creating plugins and on site pages (frontend). It's not difficult.

Connecting the Color Picker in the Admin Panel

To connect the Iris color selection to form fields when writing a plugin, you need to perform 3 actions:

#1 Add styles and wp-color-picker scripts

Using the admin_enqueue_scripts event, you need to connect the "wp-color-picker" script and styles. Also, here we will connect our own js file:

# Connect Iris Color Picker
add_action( 'admin_enqueue_scripts', 'add_admin_iris_scripts' );
function add_admin_iris_scripts( $hook ){
	// connect IRIS
	wp_enqueue_script( 'wp-color-picker' );
	wp_enqueue_style( 'wp-color-picker' );

	// connect our script file
	wp_enqueue_script( 'plugin-script', plugins_url('js/plugin-script.js', __FILE__), array('wp-color-picker'), false, 1 );
}

#2 Add form fields

Next, on the plugin settings page, in the form, use such input fields for color:

<input name="color1" type="text" value="" />
<input name="color2" type="text" value="#f19" />

If you specify a value for the field (value attribute), then Iris will take this value as the default color.

#3 Connect Iris to form fields

Next, we need to create a JS file, which is connected in the first step. Our script file will have this code:

jQuery(document).ready( function($){
	$('input[name*="color"]').wpColorPicker();
});

In this file, we connect Iris to all form fields, the name attribute value of which contains the string color: name="color1", name="my_color".

Settings for the wpColorPicker() method

The wpColorPicker() method can take parameters to customize the color selection. For example, if you need to perform certain actions during color selection. Here is a list of all the parameters that the function can take:

var myOptions = {
	// sets the default color, the default color is also taken from the value attribute of the input. The input value takes precedence
	defaultColor: false,

	// callback function that triggers every time a color is selected (when you move the mouse over the palette)
	change: function(event, ui){ },

	// callback function triggered when clearing the color
	clear: function(){ },

	// hide the color selection on load (the palette will appear when clicked)
	hide: false,

	// show the group of standard colors at the bottom of the palette
	// you can add your own colors by specifying them in the array:
	// ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
	palettes: true
};

$('.iris_color').wpColorPicker( myOptions );

Plugin Demo

To visually demonstrate the first three points, I wrote a small plugin that adds a settings page in the admin panel. The page has only one field - color selection. Here's what the result of the plugin's operation looks like:

Plugin code:

<?php
/**
 * Plugin Name: Iris Color Selection
 * Description: Demonstration of Iris color picker integration
 * Version: 1.0
 * Author: Kama
 * Author URI: http://wp-kama.com
 */

class irisDemo {

	function __construct() {
		add_action( 'admin_init', [ $this, 'init' ] );
		add_action( 'admin_menu', [ $this, 'add_options_page' ] );
		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
	}

	function init() {
		register_setting( 'iris_options', 'iris_options' );
	}

	function add_options_page() {
		add_options_page(
			'Iris Color Picker Demonstration',
			'Iris Demo',
			'manage_options',
			'iris_color_pick',
			[ $this, 'options' ]
		);
	}

	/**
	 * Settings page
	 */
	function options() {
		?>
		<div class="wrap">
			<h2><?= get_admin_page_title() ?></h2>
			<form method="post" action="options.php">
				<?php settings_fields( 'iris_options' ); ?>
				<?php $options = get_option( 'iris_options' );?>
				<p>
					<input class="iris_color" name="iris_options[link_color]"
						   id="link-color" type="text"
						   value="<?= esc_attr( $options['link_color'] ?? '' ) ?>">
				</p>
				<?php submit_button();?>
			</form>
		</div>
		<?php
	}

	/**
	 * Load styles and scripts
	 */
	function enqueue_scripts( $hook ) {
		// Make sure this is the settings page of our plugin
		if( 'settings_page_'.'iris_color_pick' != $hook ){
			return;
		}

		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );

		// connect our style
		// wp_enqueue_script( 'script_123', plugins_url( 'script.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), false, 1 );
		add_action( 'admin_footer', [ $this, 'admin_footer_script' ], 99 );
	}

	/**
	 * Connect our script in the footer
	 */
	function admin_footer_script() {
		?>
		<script>
			jQuery( document ).ready( function( $ ){
				$( '.iris_color' ).wpColorPicker( {
					// sets the default color, the default color is also taken from the value attribute of the input
					defaultColor: false,
					// callback function that triggers every time a color is selected
					// when you move the mouse over the palette
					change: function( event, ui ){},
					// callback function triggered when clearing the color
					clear: function(){},
					// hide the color selection on load
					// the palette will appear when clicked
					hide: false,
					// show the group of standard colors at the bottom of the palette
					// you can add your own colors by specifying them in the array: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
					palettes: true
				} );
			} );
		</script>
		<?php
	}

}

new irisDemo();

Integration in the Frontend

To use the Iris color selection in the frontend (on the site's frontend), you need to connect all the necessary jQuery extensions for the script to work, these are:

• jquery-ui-draggable
• jquery-ui-slider
• jquery-touch-punch

I found this solution here, I'm not sure if this is the best way to make "Iris Color Picker" work in the frontend, but this method works (checked). To make the script work, you need to connect jQuery UI elements and specify the global js variable wpColorPickerL10n:

add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );
function wpa82718_scripts() {
	wp_enqueue_style( 'wp-color-picker' );
	wp_enqueue_script(
		'iris',
		admin_url( 'js/iris.min.js' ),
		array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
		false,
		1
	);
	wp_enqueue_script(
		'wp-color-picker',
		admin_url( 'js/color-picker.min.js' ),
		array( 'iris' ),
		false,
		1
	);
	$colorpicker_l10n = array(
		'clear' => __( 'Clear' ),
		'defaultString' => __( 'Default' ),
		'pick' => __( 'Select Color' ),
		'current' => __( 'Current Color' )
	);
	wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n );

}