Home › Forums › General Issues › Custom Page Builder › Reply To: Custom Page Builder
ok, after some reading i think what i need to do is make it as a repeater field to display as an accordion in my page builder, but i still cant get it to show in my template:
json:
[
{
"key": "group_553b8b2752aba",
"title": "Page Builder",
"fields": [
{
"key": "field_553b8b4fc8c3b",
"label": "Page Sections",
"name": "acf_page_builder",
"type": "flexible_content",
"instructions": "",
"required": 1,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"button_label": "Add Section",
"min": "",
"max": "",
"layouts": [
{
"key": "561538dcw4334t",
"name": "accordion_row",
"label": "Accordion Row",
"display": "row",
"sub_fields": [
{
"key": "field_5f95ee9195280",
"label": "Accordion",
"name": "accordion",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "",
"min": 0,
"max": 0,
"layout": "table",
"button_label": "",
"sub_fields": [
{
"key": "field_5f95eebb95281",
"label": "Accordion Title",
"name": "accordion_title",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_5f95eece95282",
"label": "Accordion Content",
"name": "accordion_content",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
]
}
],
"min": "",
"max": ""
},
]
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "post"
}
],
[
{
"param": "page_template",
"operator": "==",
"value": "page-templates\/full-width.php"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": [
"the_content"
],
"active": 1,
"description": ""
}
]
PHP:
<?php
Class ACF_Page_Builder {
/**
* Check if Advanced Custom Fields is Active
* @var (Boolean)
*/
private $acf_active;
/**
* Check if Simple Contact Forms is Active
* @var (Boolean)
*/
private $scf_active;
/**
* The final HTML to return with the section data inluded
* @var String
*/
private $html;
/**
* Formats that can be used in the acfs_add_support and acfs_remove_support functions
* @var Array
*/
public $supported_formats;
/**
* Variable to declare whether we should use Bootstrap or not
* @var Boolean
*/
private $use_bs;
/**
* Constructor of the class. Sets some default values
*/
function __construct() {
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
$this->acf_active = is_plugin_active( 'advanced-custom-fields/acf.php' ) || is_plugin_active( 'advanced-custom-fields-pro/acf.php' );
$this->scf_active = is_plugin_active( 'simple-contact-forms/simple-contact-forms.php' );
$this->supported_formats = array('post_type', 'page_template');
$this->use_bs = function_exists('get_field') ? get_field('acfpb_use_bootstrap') : false;
}
/**
* Enqueue the styles and scripts for the public
*/
public function enqueuePublic() {
wp_enqueue_style( 'acfpb-public', plugin_dir_url( __FILE__ ) . '../public/css/acfpb_styles.css', false, NULL, 'all' );
}
/**
* Enqueue the styles and scripts for the admin
*/
public function enqueueAdmin() {
}
/**
* Retrieves all the section HTML
* @param String $name The slug used for the sections. Is 'sections' by default
* @return String The final HTML
*/
public function getSectionsHTML( $name, $post_id ) {
if( !$this->acf_active ) return '';
if( have_rows( $name, $post_id ) ):
$s = 1;
$this->html = '<div id="acfpb_sections">';
while ( have_rows( $name, $post_id ) ) : the_row();
$layout = get_row_layout();
if( method_exists(get_class(), 'getSection_' . $layout ) ) :
$id = 'section_' . $s;
$class = 'acfpb_section section-' . $layout;
$style = get_sub_field('bg') ? 'background-color:' . get_sub_field('bg') : '';
$contained = (boolean) get_sub_field('contained', false);
if( !$this->use_bs && $contained ) $contained = false;
$wrapper = get_sub_field('wrapper_class');
$this->html .= '<div id="' . $id . '" class="' . $class . '" style="' . $style . '"><div class="sectionwrap">';
if( $contained ) $this->html .= '<div class="container">';
if( $contained ) $this->html .= '<div class="row">';
if( $wrapper !== '' ) $this->html .= '<div class="' . $wrapper . '">';
$this->html .= $this->{'getSection_' . $layout}();
if( $wrapper !== '' ) $this->html .= '</div>'; // Wrapper finish
if( $this->use_bs ) $this->html .= '<div class="clearfix"></div>';
if( $contained ) $this->html .= '</div>'; // Row finish
if( $contained ) $this->html .= '</div>'; // Container finish
$this->html .= '</div></div>'; // Section finish
$s++;
endif;
endwhile;
$this->html .= '</div>'; // Main Wrapper finish
return $this->html;
else :
return '';
endif;
}
/**
* Admin function to add the fields to wordpress. Also figures out where to show them based on the acfs_add_support and acfs_remove_support functions
*/
public function addFieldsToWP() {
if( !$this->acf_active ) return false;
if( function_exists('acf_add_local_field_group') ) {
// Get the exported field data
$json = file_get_contents( plugin_dir_path(__FILE__) . '../admin/acf-fields.json' );
$json_to_php = json_decode( $json, true );
$acf_fields_array = $json_to_php[0]['fields'];
// Check if SCF is included or leave it out of the list of fields if not
if( !$this->scf_active ) {
foreach ($acf_fields_array[1]['layouts'] as $key => $data) {
if( $data['name'] === 'simple_contact_forms' ) {
unset( $acf_fields_array[1]['layouts'][$key] );
break;
}
}
}
// Create the rest of the field group
$meta = array(
'key' => 'group_553b8b2752aba_pb10192283',
'title' => 'Page Builder',
'fields' => $acf_fields_array,
'menu_order' => 10,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => array (),
'location' => array(),
'active' => 1,
'description' => '',
);
// Filter to get the locations
$location = apply_filters( 'acfpb_set_locations', array() );
$l = 0;
foreach ($this->supported_formats as $format) {
if( !isset($location[$format]) || empty($location[$format]) ) continue;
$meta['location'][$l] = array();
foreach ($location[$format] as $place) {
$meta['location'][$l][] = array(
'param' => $format,
'operator' => '==',
'value' => $place,
);
$l++;
}
}
acf_add_local_field_group($meta);
}
}
/**
* Get the Accordion section.
* @return String Final string of this section
*/
private function getSection_accordion_row() {
if( have_rows('accordion') ):
$i = 1; // Set the increment variable
echo '<div id="accordion">';
// loop through the rows of data for the tab header
while ( have_rows('accordion') ) : the_row();
$header = get_sub_field('accordion_title');
$content = get_sub_field('accordion_content');
?>
<div class="card">
<div class="card-header" id="heading-<?php echo $i;?>">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapse-<?php echo $i;?>">
<?php echo $header; ?>
</button>
</h5>
</div>
<div id="collapse-<?php echo $i;?>" class="collapse" aria-labelledby="heading-<?php echo $i;?>" data-parent="#accordion">
<div class="card-body">
<?php echo $content; ?>
</div>
</div>
</div>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</div>';
else :
// no rows found
echo 'Come back tomorrow';
endif;
}
}
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!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.