Color-Picker Front-end

• EpicKau

• May 19, 2018 at 9:00 am

Hey guys, I can’t get the color-picker working.
Pseudo code:

acf_form_head();
acf_register_form();
acf_form(); 

With the above code I get an js error, “wpColorPickerL10n is not defined”.
Ok so I hooked “wp_enqueue_scripts” and add some ref.

function custom_color_picker_scripts()
 {

wp_enqueue_style('wp-color-picker' );
wp_enqueue_script('iris', admin_url('js/iris.min.js'), array('jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch'), false, true);
wp_enqueue_script('wp-color-picker', admin_url('js/color-picker.min.js'), array('iris'), false, true);

$colorpicker_l10n = array('clear' => __( 'Clear' ),'defaultString' => __( 'Default' ), 'pick' => __( 'Select Color' ),	'current' => __( 'Current Color' ));
wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n );

}
add_action( 'wp_enqueue_scripts', custom_color_picker_scripts);

So yeah the error is gone, now I get “this._addClass is not a function” from jquery-ui..

Newest Wp & acf.

Thanks in advice !

• John Huebner

• May 21, 2018 at 10:13 pm

ACF will set up the color picker for acf_form() correctly and the color picker is working for me. I would look for another source for your issue, it could be a JS error somewhere else that’s causing the problem. Have you tried disabling other plugins to see if ACF works on it’s own?

• EpicKau

• May 21, 2018 at 11:04 pm

I have no other plugins running, only acf & stock wp.

my template src:

<?php acf_register_form(array(
	'id'		=> 'save_meeting',
	'post_id'	=> 'new_post',
	'new_post'	=> array(
		'post_type'		=> 'termin_type',
		'post_status'	=> 'publish'
	),
	'post_title'=> true,
	'post_content'=> false,
)); ?>

	<?php acf_form("save_meeting"); ?>

Its just an custom type with some acf elements.
I know that the color-picker works in back-end & all other acf elements also on front-end. (E.g. date-time, post-object, map)
acf: 5.6.10 – git src
wp: 4.9.6
I also downgraded to an old acf version, but same result. I dont include any other resources manually.

• John Huebner

• May 22, 2018 at 12:23 am

I tried it on WP using 2017 theme. Everything works as expected.

What theme are you using?

Where have you places acf_form_head()?

• EpicKau

• May 22, 2018 at 1:10 am

Custom self builded,
the ‘acf_form_head()’ is included before ‘get_header()’ get called.

Nvm. I found the problem. I had iris included in theme main wp_enqueue_scripts action.
But why should this be a problem?

• John Huebner

• May 22, 2018 at 1:21 am

Because the script was probably included twice which could cause duplicate function errors, possibly. It would depend on the handle you used. If you use the same handle used by ACF then the duplication would not happen. But that’s just a guess.