How to customize the colour palette for ACF’s colour picker field

Ever found yourself wishing you could define an exact colour palette for ACF’s colour picker field?

Good news! You totally can.

Using the JavaScript API built right into Advanced Custom Fields we can use a very small snippet of code to specify exactly which colours appear in the palette of suggested colours.

<?php
add_action( 'admin_footer', function () {
?>
<script>
if (window.acf) {
acf.addFilter('color_picker_args', function (args, $field) {
args.palettes = [
'#E6D8D5',
'#E75274',
'#F9FEFD',
'#58C2B5',
];
return args;
});
}
</script>
<?php
} );

Now, in this example, I’m just dropping this into the admin as an inline script. This works perfectly fine but you may consider adding this to a JavaScript file and enqueuing it.

Need a website? Let's talk.

From website design & SEO through to custom WordPress plugin development. I transform ideas into dynamic, engaging, and high-performing solutions.
Subscribe to get the latest insights & updates in the world of web and how it impacts your business and website.
© 2024 Phil Kurth  |  All rights reserved.