ACF Color Picker Custom Pallets 🎨


So you need to add a custom pallet to the ACF color picker to match the branding of the site. Use an ACF action in functions to put JS into the footer of the edit page, use a ACF JS filter to add the arguments.

Add JS to admin footer with an ACF action.

I like to separate these things into their own files. In your functions.php add a require to the new hook.

/**
 * ACF Admin Footer (adds JS to admin footer)
 */
require get_stylesheet_directory() . '/inc/acf-admin-footer.php';

In your include add the action, and then the script.

<?php
/**
 * Add custom JS to interact with and modify ACF fields and settings.
 *
 * @link https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/
	* @link https://support.advancedcustomfields.com/forums/topic/color-picker-palettes-more-than-one-2/
 */

function josh_custom_acf_block_color_picker_footer_js() {
	?>
		<script type="text/javascript">
				(function($) {
						$(document).ready(function(){

								/**
									* ACF Color Picker Pallets
									*/

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

												// Find the field key
												let targetFieldKey = $field[0]['dataset']['key'];

												// Set color options for the field
												// if field name is my_background_color
												if ( 'field_657cb1234a7c0' === targetFieldKey ) {
														args.palettes = [ '#F3E8EE', '#E5EAF1', '#F06C00'  ];
												}

												// if field name is my_text_color
												if ( 'field_657cb1234a7b1' === targetFieldKey ) {
														args.palettes = [ '#404040', '#ffffff', '#cccccc' ];
												}

												// Return
												return args;
										});
								}
								setDefaultPalette();

						});
				})(jQuery);
		</script>
		<?php
}
add_action( 'acf/input/admin_footer', 'josh_custom_acf_block_color_picker_footer_js' );

The “field_XXXXXXXXXX” is hard to find. The easiest spot is in the browser inspector. There is a data-key attribute that holds this info.


Links