Custom Field Type – Collapsible start/end

• [email protected]

• September 22, 2016 at 2:01 am

I have a client where we are using a large number of custom fields (100 – 200). Without creating multiple field groups I need a way to add in custom collapsible sections to better organize all the ACF fields for my client.

I decided to create 2 custom field types, collapsible_start & collapsible_end. Then I could easily insert one of each of those field groups around an X number of ACF fields to create a collapsible section within the field group.

The Custom Field Types I have created only need to output the correct html markup in order for this to work successfully.

The issue I have is that the render_field() function outputs inside inside 2 ACF wrappers and the collapsible markup with not work. I have started on a JS work around but that is not ideal.

Has anybody coded something similar to this?
Is there a setting, filter or hook I can use to prevent ACF for outputting the 2 wrappers for a field?

See html markup & code below:

HTML markup I want to use:

<!-- Beginning of collapse_start -->
<div id="field-serializedID" class="postbox acf-postbox">
	<button type="button" class="handlediv button-link" aria-expanded="true">
		<span class="screen-reader-text">Toggle panel: Field Name HERE</span>
		<span class="toggle-indicator" aria-hidden="true"></span>
	</button>
	<h2 class="hndle ui-sortable-handle">
		<span>Field Name HERE</span>
	</h2>
	<div class="inside acf-fields -top">
	<!-- End of collapse_start -->
	
	<!-- Beginning of collapse_end -->
	</div>
</div>
<!-- End of collapse_end -->

Markup that needs to be removed from ACF Field Output

<div class="acf-field acf-field-text acf-field-57e141bb2c2cb" data-name="affilliateurl" data-type="text" data-key="field_57e141bb2c2cb">
	<div class="acf-label">
		<label for="acf-field_57e141bb2c2cb">affilliateurl</label>
	</div>
	<div class="acf-input">
		<!-- render_field() currenlty outputs here...	 -->
	</div>
</div>
<!-- render_field() needs to output here, outside of 2 wrappers...-->

acf-collapse-start-v5.php file

<?php

// exit if accessed directly
if( ! defined( 'ABSPATH' ) ) exit;

// check if class already exists
if( !class_exists('acf_field_collapse_start') ) :

class acf_field_collapse_start extends acf_field {

	function __construct( $settings ) {

		$this->name = 'collapse_start';

		$this->label = __('Collapse Start', 'acf-custom-field-types');

		$this->category = 'Wordpress Backend';

		$this->settings = $settings;
		
		// do not delete!
    	parent::__construct();
    	
	}
	
	function render_field( $field ) {
		
		
		/*
		*  Review the data of $field.
		*  This will show what data is available
		*/
		
		// echo '<pre>';
		// 	print_r( $field );
		// echo '</pre>';
		
		?>
		<div id="acf-testing" style="background: red; color: #fff;">
			Collapse Start!
		</div>
		<?php

	}
	
	function input_admin_enqueue_scripts() {
		
		// vars
		$url = $this->settings['url'];
		$version = $this->settings['version'];
		
		
		// register & include JS
		wp_register_script( 'acf-custom-field-type-js', "{$url}assets/js/custom.js", array('acf-input'), $version );
		wp_enqueue_script('acf-custom-field-type-js');
		
	}
}

// initialize
new acf_field_collapse_start( $this->settings );

// class_exists check
endif;

?>

• John Huebner

• September 22, 2016 at 3:05 am

I would suggest that you look at the Tab field type in ACF. It seems to work similar to how you want your fields to work. If you follow that as an example you may only need one additional field type.

• [email protected]

• September 22, 2016 at 4:18 am

John, thank you! That was exactly what I needed! I cannot believe I overlooked that field type. I don’t even need to create any custom field types now. Much appreciated!

• John Huebner

• September 22, 2016 at 4:26 am

I thought of that after my comment, but thought there might be some reason you needed something different.