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

Theme.json Custom Colors

Since the WordPress 5.8 version, the core team introduced the new theme.json logic, but doesn’t handle backward compatibility with the get_theme_support() function which is used to retrieve a theme feature.

You can use the following in the functions.php file in order to translate theme.json colors into a supported theme feature:

add_action('after_setup_theme', 'my_after_setup_theme');
function my_after_setup_theme(){
    
    // bail early if WP < 5.8
    if(!class_exists('WP_Theme_JSON_Resolver')){
        return;
    }
    
    // bail early if theme is missing theme.json
    if(!WP_Theme_JSON_Resolver::theme_has_support()){
        return;
    }
    
    // retrieve theme json
    $theme_data = WP_Theme_JSON_Resolver::get_theme_data();
    $theme_settings = $theme_data->get_settings();
    
    // check colors exists
    if(isset($theme_settings['color']['palette']['theme'])){
        
        // prepare colors
        $colors = array();
        
        // loop
        foreach($theme_settings['color']['palette']['theme'] as $palette){
            
            // add palette
            $colors[] = array(
                'name' => $palette['name'],
                'slug' => $palette['slug'],
                'color' => $palette['color'],
            );
            
        }
        
        // add theme support
        add_theme_support('editor-color-palette', $colors);
        
    }
    
}

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