I’ve taken over a plugin which relies heavily on Advanced Custom Fields. For further development I updated ACF from version 4 to the latest version (5.8.x).
The plugin includes styles and scripts relying on HTML element (e.g. input) IDs such as acf-field-header_caption, where header_caption is the field name. This works well with ACF 4, but in version 5, the much less coder-friendly field key (e.g. 5ac098bae96e4) is used for the IDs and classes, eg: acf-field-5ac098bae96e4. (The custom fields are added to a post_type, the IDs are as they appear on the create/edit form of that post_type in the backend.)
Is there a way to revert back to HTML IDs in which the field names rather than the field keys are used?
There is a chance that I missed a filter not working in v5 anymore modifying these IDs but so far it doesn’t look like it. I’m thankful for any hint.
Posted also on Stackoverflow with an example.
No, there isn’t a way to revert the field ID values. The only place you will find the field name is in the wrapper div data-name="field_name_here".
In addition to the change in IDs and classes, even changing them would likely not help with the JS. If the JS is dependent on ACFs JS then it probably will not work anyway. The JS in ACF5 is completely different than ACF4 and any custom JS that interacts with it would need to be completely rebuilt.
Thanks for the quick reply, John. There is no dependancy on the ACF JS, just the IDs and classes are needed for some show/hide logic.
I wish those changes were documented in the upgrade guide, as they break a lot of things. Ideally there would be another compatibility filter that – when enabled – outputs the old ID and class format. I liked the field names in the IDs as it made it obvious, what input field belongs to which custom field.
But I’m happy I didn’t overlook any obvious setting and will start implementing the new IDs and classes now. 🙂
