Wrap field groups in unique divs with acf_form() (working feature code included)

• rmmoul

• October 30, 2014 at 5:56 pm

I was doing some last minute testing on a site tonight, and I wanted to add some visual separation between between the field groups being shown on the front-end of the site.

I couldn’t find a way to do this without updating the core acf pro files, so I did and if there was a way to do this already please point me in the right direction. I’d have suggested these through github, but the version hosted there isn’t the 5.1.0 that I’m using.

My use case is that I have several field groups based on input content type. Tabs could be used here, but the content lends itself better to being stacked rather than tabbed to make it easier for users to enter info. Think “Event name with sub fields for location, date and time, and details” in one group, and “Menu items with price field (in repeater field)” in the next section of field groups, and “Images (repeater field)” as the final section of the set. Using the current acf_form() function just outputs each field one after the other, even though they are fields from three different field groups.

My updates add an argument for the array passed to acf_form() called wrap_field_groups, which defaults to false. Setting it to true will cause the form to wrap each field group with a div with an id equal to the group’s key and a class of acf_form_field_group_wrap.

You could then target the id of a specific group wrapper, or style them all using the class.

You’d implement it like this:

$args = array(
    post_id' => 'new',
    field_groups' => array(107, 106, 105, 99), //as many as you needed
    wrap_field_groups' => true
);
acf_form($args); 

I updated the following two files to impliment this:

/api/api-template.php
/api/api-helpers.php

It would be great if this could be implemented in the plugin core, or if a filter could be added for something like this.

I’ve attached a zip containing the two files I’ve updated, and you can see the updates at the following line numbers (or just diff them against fresh ones from 5.1.0).

api-template.php lines:
1137
1250 – 1256
1269 – 1274

api-helpers.php lines:
393-397

updated-file....zip

• locomo

• March 11, 2015 at 2:21 pm

+1 this is great, thanks

did you ever get any response about integrating your ideas into the plugin core?

in ACF4 field groups were wrapped which allowed for much more flexibility in the visual display of front end forms

updated-file....zip

• locomo

• March 12, 2015 at 2:14 am

It would also be ideal if there was another parameter in acf_form that let you toggle display of the field group name as well – this would kind of emulate how the “style” option works for field groups in the backend .. ie Standard (WP Metabox) with field group title or Seamless (no metabox) and no field group title

• rmmoul

• March 12, 2015 at 2:54 am

I never heard back about it, and for this project I just hacked plugin core and disabled updating (not the best move, but it needed to be done).

There is a “Wrapper Attributes” field now that lets you specify a class (among other things) in the ACF pro plugin, but I haven’t checked to see if it adds the class when using the acf_form() function, and it is only available to each input, not the whole group. I also haven’t checked to see if anything has been added to make each field group output uniquely ID’d either, so maybe something like what I suggested has been added and I just don’t know about it.

I like your suggestions too, and think that there are quite a few features that could be added on this front. I feel like this is probably one of the less used abilities of the plugin though, so I can understand why it wouldn’t get frequent feature updates. If it was available on github I wouldn’t mind making updates like these and submitting pull requests but I’m using the pro plugin.

• locomo

• March 12, 2015 at 4:43 am

cool thanks .. if I make any additional enhancements to what you posted here i’ll share them on this thread

• locomo

• March 12, 2015 at 7:16 am

ok here are my core hack updates to allow for wrapping of field groups and optional display of field group titles in front end forms

usage:

$args = array(
    wrap_field_groups' => false // don't wrap [default]
    wrap_field_groups' => true // wrap without title
    wrap_field_groups' => 'show_title' // wrap with title
);
acf_form($args);

api-field.php
line 474 – 480

// ACF5 core hack BEGIN
// are we opening or closing a field group?
if( $field['field_group_wrap'] === true ) {
	echo $field['value'];
	return;
}
// ACF5 core hack END

api-template.php
line 1273 – 1275

// ACF5 core hack BEGIN		
'wrap_field_groups'		=> false,
// ACF5 core hack END

line 1386 – 1401

// ACF5 core hack BEGIN
// check for field group wrap
if( !empty( $args['wrap_field_groups'] ) ){
	$wrapper = array(
			'field_group_wrap' => true,
			'value' => '<div id="'.$field_group['key'].'" class="acf_form_field_group_wrap">'
	);

	if ( 'show_title' === $args['wrap_field_groups']) {
		$wrapper['value'] = '<div id="'.$field_group['key'].'" class="acf_postbox acf_form_field_group_wrap">
									<h3 class="acf_form_field_group_title">'.$field_group['title'].'</h3>';
	}

	$fields[] = $wrapper;
}				
// ACF5 core hack END

line 1408 – 1416

// ACF5 core hack BEGIN
// check for field group wrap
if( !empty( $args['wrap_field_groups'] ) ){
	$fields[] = array(
		'field_group_wrap' => true,
		'value' => '</div><!-- end field group -->'
	);
}				
// ACF5 core hack END

• rmmoul

• March 12, 2015 at 7:25 am

That’s looks great!

My only suggestion would be checking for a false value (even though it’s the default if the setting is omitted) in api-template.php on lines 1386 – 1401 using something like this:

    if( !empty( $args['wrap_field_groups'] ) && $args['wrap_field_groups'] !== false  ){
        ...

Otherwise passing a value of false would still cause the wrappers to be output.

• locomo

• March 13, 2015 at 4:01 am

cool thanks, i’ll add that in!

• dwight

• July 29, 2015 at 5:17 am

I really really wish this was integrated into the core. I need to be able to keep acf up to date and can’t seem to figure out how to accomplish this without implementing your updates…

• dwight

• July 29, 2015 at 6:25 am

As a not so great alternative I added a class to each field of a particular group and used jquery to wrap these elements within a div.

$('.group1').wrapAll('<div class="field_group field_group_1">');

• dwsww

• July 24, 2016 at 1:46 am

Hey all, any news about this being implemented into the core?

• amitbiswas06

• August 2, 2016 at 5:29 pm

There is no need to hack the core indeed. Here is how to achieve this –

https://support.advancedcustomfields.com/forums/topic/how-to-wrap-field-groups/#post-41536