I think I got it figured out… I ended up with the following file structure:
wp-content/
↳ themes/
↳ [theme]/
↳ acf/
↳ assets/
↳ css/
↳ [field].css
↳ js/
↳ [field].js
↳ fields/
↳ [field].php
↳ json/
↳ init.php
In init.php I’m setting the acf-json directory, and also including my fields:
add_action ( 'acf/include_field_types', 'acf_include_field_types' );
function include_field_types ( $version = false ) {
if ( $version == 5 ) {
foreach ( ( array ) glob ( get_template_directory() . '/acf/fields/*.php' ) as $field ) {
include $field;
}
}
}
Then, in the field class that extends acf_field, I just removed $settings from the __construct() call and defined them in the $this->settings variable:
$this->settings = array (
'version' => '1.0.0',
'url' => get_template_directory_uri() . '/acf/',
'path' => get_template_directory() . '/acf/'
);
So going forward, I should just need to create new PHP, CSS and JS files for each field type. Hope this helps someone!
You know what, it was totally my fault. I wasn’t using the ACF JavaScript hooks, switched to those and it’s working great.
I’m having a similar issue with the acf/load_field hook, though it seems like the data for the select is working properly the select2 script isn’t initializing. I have a Select field within a Flexible Content / Repeater that loads icons from a CSS file:
add_filter( 'acf/load_field/key=field_58a4b7d2dc743', function( $field ){
$stargate = file_get_contents( get_template_directory() . '/assets/styles/icons/stargate.css' );
preg_match_all( '/\.(.*):before/', $stargate, $choices );
$choices = $choices[1];
$field['choices'] = array(
'' => ''
);
if( $choices ){
sort( $choices );
foreach( $choices as $choice ){
$field['choices'][$choice] = $choice;
}
}
return $field;
} );
which seems to be working, because my select markup contains the correct options:
<select id="acf-field_57ab771f7670b-6-field_57ae32e9ae604-58e285a16d10a-field_58a4b7d2dc743" class="" name="acf[field_57ab771f7670b][6][field_57ae32e9ae604][58e285a16d10a][field_58a4b7d2dc743]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0" tabindex="-1" title="Icon" style="display: none;">
<option value="" selected="selected" data-i="0" class=""></option>
<option value="zsg-arrow-left-parc">zsg-arrow-left-parc</option>
<option value="zsg-arrow-right-parc">zsg-arrow-right-parc</option>
</select>
however the select2 container is not enabled and has the .select2-container-disabled class. If I update the post, that select works fine. In fact this whole field was working properly but possibly stopped working with a recent update?
