Organize fields in acf_form()

• guit4eva

• August 3, 2016 at 6:54 am

Hey guys,

I’m using acf_form(), and it’s structured like this:

  $edit_post = array(
    'post_id'            => 'user_50', // Get the post ID
    'field_groups'       => array(10), // Create post field group ID(s)
    'fields'             => array(
      //        'field_54dfc93e35ec4', // Title
      'field_573d7ef0d6321', // Date of Birth
      'field_573d7eb6d6320', // Contact Number
      'field_573d84b07da66', // Address Line 1
      'field_573d84be7da69', // Address Line 2
      'field_573d84bd7da68', // Address Line 3
      'field_573d84d67da6a', // City
      'field_573d84db7da6b', // State/Province
      'field_573d84e97da6c', // Country
      'field_574465681849a', // Post Code
    ),
    'form'               => true,
    'return'             => add_query_arg( 'details', 'updated', get_permalink() ),
    'html_before_fields' => '',
    // 'html_after_fields' => '<button class="edit-cancel" type="button">Cancel</button>',
    'submit_value'       => 'Save Changes',
  );

  acf_form( $edit_post );

At the moment all the fields are clumped together which is quite untidy. Is there a way to organize the fields to make it more clean? For example, add a heading before the address fields, so that it would be more like:

      'field_573d7ef0d6321', // Date of Birth
      'field_573d7eb6d6320', // Contact Number
      'field_5744695625f8e', // ID Number
<h2>Address</h2>
      'field_573d84b07da66', // Address Line 1
      'field_573d84be7da69', // Address Line 2
      'field_573d84bd7da68', // Address Line 3
      'field_573d84d67da6a', // City
      'field_573d84db7da6b', // State/Province
      'field_573d84e97da6c', // Country
      'field_574465681849a', // Post Code

Thanks in advance!

• John Huebner

• August 3, 2016 at 8:26 am

Use the acf/render_field hook https://www.advancedcustomfields.com/resources/acf-render_field/

add_action('acf/render_field/key=field_573d84b07da66', 'add_address_heading', 1, 1);
function add_address_heading($field) {
  if (is_admin()) {
    // only on the front end
    return;
  }
  ?><h2>Address</h2><?php 
}

• guit4eva

• August 3, 2016 at 5:34 pm

Hi there John,

Unfortunately that didn’t work. If I remove the (is_admin) check, it still doesn’t show backend either. I’m a bit stumped at the moment

• John Huebner

• August 3, 2016 at 9:27 pm

What version of ACF are you using?

• guit4eva

• August 3, 2016 at 9:29 pm

Version 5.3.0

• John Huebner

• August 3, 2016 at 9:36 pm

My mistake, you can’t do render field based on the field key. You can only do it generically for every field or for a specific field type. You need to check for the field you want to add the html to in the function.

add_action('acf/render_field', 'add_address_heading', 1, 1);
function add_address_heading($field) {
  if (is_admin()) {
    // only on the front end
    return;
  }
  if ($field['key'] == 'field_573d84b07da66') {
    ?><h2>Address</h2><?php 
  }
}

• guit4eva

• August 3, 2016 at 9:51 pm

Thanks so much, that is working correctly. Is it possible to place the H2 before the label as opposed to the input field?

• John Huebner

• August 3, 2016 at 10:02 pm

You could try putting it after the previous field. Make the priority of the add_action > 10 and check for the other field. The possibilities are a little limited, but this is the only method that I know of to add html into the fields.

• guit4eva

• August 3, 2016 at 10:32 pm

Thanks for the help. What I’ve ended up doing is making a Message field and then inserting that with a bit of styling. Works for now!:) Ha ha.

Thanks again, appreciate your time!