Skip to main content

Add Custom Color Palette to ACF Color Picker / Palette Selector Field

February 18th, 2018

If you’re utilizing ACF Pro and their color picker field types within your WordPress theme(s), maybe you’ve wondered if it’s possible to add the site’s color palette to the swatches available within the field so you, or your client, aren’t left to hand input a specific color’s hex code or select a similar color from the color picker gradient.

The default color picker field selector looks like this:

Let’s say I wanted to customize that for my own site and have it to where my teal color and the dark gray that many of my headers are in are there for easy selection like this:

All I would need to do is add a function to my theme’s functions.php file to place some inline JS. NOTE: If you already are loading some custom JS into your admin in an external file, you could also place this script within that. I’m not loading anything else into my admin, custom JS-wise, so I feel an inline insertion makes more sense here than creating a standalone JS file for the same code.

function klf_acf_input_admin_footer() { ?>

<script type="text/javascript">
(function($) {

acf.add_filter('color_picker_args', function( args, $field ){

// add the hexadecimal codes here for the colors you want to appear as swatches
args.palettes = ['#2facbf', '#474747']

// return colors
return args;

});

})(jQuery);
</script>

<?php }

add_action('acf/input/admin_footer', 'klf_acf_input_admin_footer');

You could add as many color hex codes to the args.palettes as needed. It would probably be wise to also include things like white (#fff) and black (#000) to your quick color selection group, as well, for easy access.

Customizing the color palette here makes it super easy for you or your client to choose colors that match the rest of the site’s color scheme.

MORE: WordPress Tutorials

Related Articles