Admin Area

Add A New Color Picker To WordPress

In version 3.5 WordPress changed a lot of features, they improved the design of many of the existing features. One of the changes was the new color picker, changing from the default color picker farbtastic and now using a new custom color picker.

This new color picker was originally used on WordPress.com, after a couple of months of testing in WordPress.com blogs the color picker was moved over into the WordPress core. Now on the new version of WordPress 3.5 you can now use a new gradient based color picker called Iris.

iris-color-picker

If you have used the new theme customiser then you would of already seen the new color picker. The easiest way of using the new color picker is in the theme customiser which can be added by using the theme customiser custom color.

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize_manager, 'link_color', array(
	'label'        => __( 'Header Color', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

But if you want to use this in other areas of the WordPress admin, for example your own theme option pages or your plugin settings pages. You can't use the WP_Customize_Color_Control class as this can only be used on the theme customiser page, you need to call the color picker in a different way.

First you need to include the styles and javascript on the page by using the default scripts.

This will now add a script.js file on your page with a dependency on the wp-color-picker Javascript file.

add_action( 'admin_enqueue_scripts', 'wp_enqueue_color_picker' );
function wp_enqueue_color_picker( ) {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker-script', plugins_url('script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

Where you want to use the wp-color-picker you just need to assign the javascript to an input textbox. Add a textbox to your settings page with a CSS class for the color picker. If you want to set a default color to this color picker you can use a HTML attribute of data-default-color="".

<input type="text" value="#eeeeee" class="wp-color-picker-field" data-default-color="#ffffff" />

With this textbox on the screen you can assign the jQuery plugin wpColorPicker(), open up the script.js file in your plugin and add the following to assign the color picker to the textbox field.

jQuery(document).ready(function($){
    $('.wp-color-picker-field').wpColorPicker();
});

Now if you look at your settings page you will be able to use the new color picker, with the default colour from the HTML attribute data-default-color.

If you want to change the defaults assigned to the color picker you can use the following options.

var myOptions = {
    // you can declare a default color here,
    // or in the data-default-color attribute on the input
    defaultColor: false,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){},
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};
 
$('.wp-color-picker-field').wpColorPicker(myOptions);

WordPress 3.6 Iris Color Picker

In WordPress version 3.6 the default color picker changed from farbtastic to Iris color picker. Farbtastic is still included in the WordPress core so you can still use this or you can use the new color picker Iris.

To use the new color picker use the following code to include the Iris Javascript files in your WordPress site.

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
        );

With the Iris color picker included you can create a HTML text element with a color-picker CSS class so we can identify which input boxes will be converted to a color picker.

<input type="text" name="color" id="color" class="color-picker" />

In your Javascript you can define the input boxes and run the iris() method on these elements. In this example all the elements with the class color-picker will be converted to the Iris color picker.

$('.color-picker').iris();
Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial