Home › Forums › Backend Issues (wp-admin) › Custom Field Type – Collapsible start/end
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;
?>
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.
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!
I thought of that after my comment, but thought there might be some reason you needed something different.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
CPT registration is coming to ACF! We demoed the new feature during the most recent session of ACF Chat Fridays. Check out the summary for the details. https://t.co/k2KQ3WWBAz
— Advanced Custom Fields (@wp_acf) March 7, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.