Field Render

A collection of advanced settings for the ACF Color Picker. The field can now be displayed as a palette, custom colors can be predefined and RGBA mode is supported using the WP Color Picker Alpha library.

Field Group

Field Settings

Setting nameDescription
Display StyleChoose to display the default color picker or Palette style
Button LabelChange the default “Select Color” text
Color PickerChoose to display the color picker
Position AbsoluteDisplay the color picker in absolute mode
Text InputAllow or disallow text color input
Allow NullAllow to clear the color
RGBAEnable the alpha color channel
Use Theme Colors
Inject the editor-color-palette colors
Custom Colors
Add custom colors

Custom Colors

It is possible to add custom colors directly within the field settings. Additionally the “Use Theme Colors” setting will automatically inject colors defined in the “Editor Color Palette” theme support. See Documentation. Usage example:

add_theme_support('editor-color-palette', array(
    array(
        'name'  => 'Primary',
        'slug'  => 'primary',
        'color' => '#a156b4',
    ),
    array(
        'name'  => 'Red',
        'slug'  => 'secondary',
        'color' => '#d0a5db',
    ),
));

Javascript Hooks

A new Javascript hook has been added to perform an action when a new color is selected. It is recommended to use the acf/input/admin_enqueue_scripts hook to enqueue a custom ACF JS file. See documentation.

Color Picker Update Value

/*
 * Color Picker: Update Color
 * 
 * @string  val    Color value
 * @object  field  ACF Field instance
 */
action('acfe/fields/color_picker/update_color',                         val, field);
action('acfe/fields/color_picker/update_color/name=my_color_picker',    val, field);
action('acfe/fields/color_picker/update_color/key=field_608abfa17fa7f', val, field);
acf.addAction('acfe/fields/color_picker/update_color/name=my_color_picker', function(val, field){

    // Do something

});

Field Value

Value can then be retrieved using the common get_field() function. Usage example:

$color = get_field('color');

// #2271b1