Home Forums Front-end Issues Overwrite core function acf_render_field_wrap


Overwrite core function acf_render_field_wrap

  • 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:

    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')
    		// Date picker & Google Maps compatibility
    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.