Change Advanced Custom Field’s Color Picker Color Swatch
When working with Advanced Custom Field’s Color Picker field, you’ll often want to change the color options available to the editor. After all, you are customizing the fields for a content creator. Making the color swatch something custom will often allow for quick access and avoid constantly copying HEX codes.
Below is the code snippet you can place in your theme’s functions.php file. Customize as needed!
function my_acf_color_switch() { ?>
<script type="text/javascript">
(function($) {
acf.add_filter('color_picker_args', function( args, $field ){
args.palettes = ["#336699","#224455","#446688","#992233","#AA1100","#44BB33","#669944","#3d3d3d"]
return args;
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'my_acf_color_switch');
Adding this to your theme will switch out the color swatch initialized by Advanced Custom Field’s color picker field. The example above will cover 1 row (8 per row), but you can add up to 48!
Bonus Tip: Change the Font Text Color Swatch for WYSIWYG Editor
Since you’ve customized the color swatch for a color picker field in your editor, wouldn’t it be great to customized the text colors available to your content editor, as well?
Below is a code snippet to place in your theme’s functions.php to change the color swatch available for the text colors:
function my_mce4_options($init) {
$custom_colours = '
"2981d9", "Blue",
"900bad", "Purple",
"e0f874", "Yellow",
"ffaf00", "Gold Yellow",
"b60f04", "Red",
"32be56", "Green",
"1b8307", "Dark Green",
"3d3d3d", "Gray"
';
$init['textcolor_map'] = '['.$custom_colours.']';
$init['textcolor_rows'] = 1;
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');
This is just another feature to help your editor’s experience when editing their site!
Hope this helps! Happy coding!