In the file ‘advanced-custom-fields-pro/includes/acf-field-functions.php‘ starting on line 733 a part of the fields HTML is being rendered. I would like to add 2 css classes to the output like this:
// Render HTML
echo "<$element $attributes_html>" . "\n";
if( $element !== 'td' ) {
echo "<$inner_element class=\"acf-label uk-form-label\">" . "\n";
acf_render_field_label( $field );
if( $instruction == 'label' ) {
acf_render_field_instructions( $field );
}
echo "</$inner_element>" . "\n";
}
echo "<$inner_element class=\"acf-input uk-form-controls\">" . "\n";
acf_render_field( $field );
if( $instruction == 'field' ) {
acf_render_field_instructions( $field );
}
echo "</$inner_element>" . "\n";
echo "</$element>" . "\n";
The function is called in line 632:
function acf_render_field_wrap( $field, $element = 'div', $instruction = 'label' )
Is there a way to safely overwrite this part of the function so I can add those css classes UPDATE PROOF?
Thanks a lot.
No, there isn’t a way to override the function.
ACF provides a wrapper class field. You can target labels and fields in the wrapper like
.my-wrapper-class .acf-label {}
.my-wrapper-class .acf-field input {}
/* etc... */
If you cannot figure out how to do what you want like that and you must add the classes then these additions would have to be done using JavaScript.
Tnx. I was a little afraid it would be done with javascript.
I tried to figure out how (many times) with this tutorial:
https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields
I know how to call javascript to a field but I don’t know what code I should use to add it…
Would it be something like this?
// Customization to datepicker and timepicker
function yl_add_label_class_to_acf_fields() {
?>
<script type="text/javascript">
(function($) {
// Check ACF
if(typeof acf === 'undefined')
return;
// Date picker & Google Maps compatibility
$('.acf-label').addClass('uk-form-label');
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'yl_add_label_class_to_acf_fields');
the selector you will need in JS will look something like
$('[data-key="field_XXXXXX"] .acf-label label');
You need to inspect the DOM to get exactly what you need.
