Home › Forums › General Issues › Custom Page Builder
Solving
Custom Page Builder
-
Hi, I’m trying to add an accordion to this custom page builder but i cant get it to work. Basically i have added open and closing accordion fields to the json file and each has a title and a wysiwyg editor, but it breaks my site when i try to use it.
json code:
[ { "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": "56c0e6afec566", "name": "banner", "label": "Banner Image", "display": "block", "sub_fields": [ { "key": "field_56c0e6efec56d", "label": "Contained", "name": "contained", "type": "true_false", "instructions": "", "required": 0, "conditional_logic": [ [ { "field": "field_56c0a959e8e90", "operator": "==", "value": "1" } ] ], "wrapper": { "width": "", "class": "", "id": "" }, "message": "Place in a container?", "default_value": 0 }, { "key": "field_56c0e712ec56e", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": [ [ { "field": "field_56c0e6efec56d", "operator": "==", "value": "1" } ] ], "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_56c0e6c8ec56c", "label": "Image", "name": "image", "type": "image", "instructions": "", "required": 1, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "return_format": "url", "preview_size": "medium", "library": "all", "min_width": "", "min_height": "", "min_size": "", "max_width": "", "max_height": "", "max_size": "", "mime_types": "" }, { "key": "field_56c0f2dcf1e39", "label": "Text", "name": "use_text", "type": "true_false", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "message": "Place text over image?", "default_value": 0 }, { "key": "field_56c0f2b0f1e38", "label": "Text on Top of Image", "name": "text_on_image", "type": "wysiwyg", "instructions": "", "required": 0, "conditional_logic": [ [ { "field": "field_56c0f2dcf1e39", "operator": "==", "value": "1" } ] ], "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "tabs": "all", "toolbar": "full", "media_upload": 0 } ], "min": "", "max": "" }, { "key": "554a765bd3324", "name": "button", "label": "Button", "display": "row", "sub_fields": [ { "key": "field_554a777fd3328", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_554a7667d3325", "label": "Button Text", "name": "button_text", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_554a7684d3326", "label": "Page Linking", "name": "link_to_page", "type": "select", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "choices": { "anchor": "ID Anchor", "external": "External Link", "internal": "Internal Link" }, "default_value": [], "allow_null": 0, "multiple": 0, "ui": 0, "ajax": 0, "placeholder": "", "disabled": 0, "readonly": 0 }, { "key": "field_55aff9e1ee51e", "label": "Anchor", "name": "button_anchor", "type": "text", "instructions": "", "required": 1, "conditional_logic": [ [ { "field": "field_554a7684d3326", "operator": "==", "value": "anchor" } ] ], "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "#", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_554a77f8d332b", "label": "External Link", "name": "external_link", "type": "text", "instructions": "", "required": 1, "conditional_logic": [ [ { "field": "field_554a7684d3326", "operator": "==", "value": "external" } ] ], "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_554a77c9d332a", "label": "Internal Link", "name": "internal_link", "type": "page_link", "instructions": "", "required": 1, "conditional_logic": [ [ { "field": "field_554a7684d3326", "operator": "==", "value": "internal" } ] ], "wrapper": { "width": "", "class": "", "id": "" }, "post_type": [], "taxonomy": [], "allow_null": 0, "multiple": 0 } ], "min": "", "max": "" }, { "key": "5540bf0259b1d", "name": "content_grid", "label": "Content Columns", "display": "block", "sub_fields": [ { "key": "field_56c0b470864df", "label": "IMPORTANT", "name": "", "type": "message", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "message": "<p style=\"color: red;\">This section uses <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\">Bootstrap<\/a> columns. Bootstrap divides the page width by columns in divisions of 12. So for 2 columns use width col-sm-6, for 3 columns use width col-sm-4, and so on. In most cases 'Offset' should be set to 0.<\/p>", "new_lines": "wpautop", "esc_html": 0 }, { "key": "field_554909228473a", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_56c0b485864e0", "label": "Wrapper Class", "name": "wrapper_class", "type": "text", "instructions": "i.e. col-sm-4 col-sm-offset-4", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_5540bf1159b1e", "label": "Content Columns", "name": "content_columns", "type": "repeater", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "collapsed": "", "min": 1, "max": 4, "layout": "table", "button_label": "Add Columns", "sub_fields": [ { "key": "field_5540c0bb59b1f", "label": "Content", "name": "content", "type": "wysiwyg", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": 70, "class": "", "id": "" }, "default_value": "", "tabs": "all", "toolbar": "full", "media_upload": 1 }, { "key": "field_554a5878c9372", "label": "Width", "name": "width", "type": "number", "instructions": "", "required": 1, "conditional_logic": 0, "wrapper": { "width": 15, "class": "", "id": "" }, "default_value": 3, "placeholder": "", "prepend": "col-sm-", "append": "", "min": 1, "max": 12, "step": 1, "readonly": 0, "disabled": 0 }, { "key": "field_554a57bbc9370", "label": "Offset", "name": "offset", "type": "number", "instructions": "", "required": 1, "conditional_logic": 0, "wrapper": { "width": 15, "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "col-sm-offset-", "append": "", "min": 0, "max": 12, "step": 1, "readonly": 0, "disabled": 0 } ] } ], "min": "", "max": "" }, { "key": "553b90972ce3e", "name": "gallery", "label": "Gallery", "display": "row", "sub_fields": [ { "key": "field_553bd89149bd2", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_56c0ef638f980", "label": "Images per Row", "name": "images_per_row", "type": "number", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": 4, "placeholder": "", "prepend": "", "append": "", "min": 2, "max": 6, "step": "", "readonly": 0, "disabled": 0 }, { "key": "field_553b90972ce3f", "label": "Images", "name": "images", "type": "repeater", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "collapsed": "", "min": 1, "max": 8, "layout": "table", "button_label": "Add Image", "sub_fields": [ { "key": "field_553bd41f82d1e", "label": "Image", "name": "image", "type": "image", "instructions": "", "required": 1, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "return_format": "url", "preview_size": "thumbnail", "library": "all", "min_width": "", "min_height": "", "min_size": "", "max_width": "", "max_height": "", "max_size": "", "mime_types": "" }, { "key": "field_553bd45b82d1f", "label": "Title", "name": "title", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_553bd48582d20", "label": "Caption", "name": "caption", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 } ] } ], "min": "", "max": "" }, { "key": "561538dcc6acb", "name": "raw_html", "label": "Raw HTML", "display": "row", "sub_fields": [ { "key": "field_56c0eb7227216", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_561538e6c6acc", "label": "HTML", "name": "html", "type": "textarea", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "maxlength": "", "rows": "", "new_lines": "", "readonly": 0, "disabled": 0 } ], "min": "", "max": "" }, { "key": "561538dcw4334t", "name": "accordion_row", "label": "Accordion Row", "display": "block", "sub_fields": [ { "key": "field_56c0ebgdtgs", "label": "accordion-open", "name": "", "type": "accordion", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "open": 0, "multi_expand": 0, "endpoint": 0, }, { "key": "field_56c0eb72strgd", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_553bd45b2twf", "label": "Title", "name": "accordion-title", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_553b8ce8yb45rty", "label": "Content", "name": "content", "type": "wysiwyg", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "tabs": "all", "toolbar": "full", "media_upload": 1 }, { "key": "field_56c0ebgdwc3f5", "label": "accordion-close", "name": "", "type": "accordion", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "open": 0, "multi_expand": 0, "endpoint": 1, }, ], "min": "", "max": "" }, { "key": "553b8cd6dbe66", "name": "wysiwyg", "label": "Content Editor", "display": "block", "sub_fields": [ { "key": "field_553bc590fbc55", "label": "Background Colour", "name": "bg", "type": "color_picker", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "" }, { "key": "field_553b8ce8c8c3c", "label": "Content", "name": "content", "type": "wysiwyg", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "tabs": "all", "toolbar": "full", "media_upload": 1 } ], "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 Banner section. * @return String Final string of this section */ private function getSection_banner() { $class = $this->use_bs ? 'img-responsive' : ''; $html = '<div class="banner-holder">'; $html .= '<img src="' . get_sub_field('image') . '" class="' . $class . '" />'; if( get_sub_field('use_text') ) $html .= '<div class="acfpb-hover-text">' . get_sub_field('text_on_image') . '</div>'; $html .= '</div>'; return $html; } /** * Get the button section. * @return String Final string of this section */ private function getSection_button() { $class = get_sub_field('button_class'); $text = get_sub_field('button_text'); switch ( get_sub_field('link_to_page') ) { case 'anchor': $href = '#' . get_sub_field('button_anchor'); break; case 'external': $href = get_sub_field('external_link'); break; case 'internal': $href = get_sub_field('internal_link'); break; default: $href = '#'; break; } $html = '<a href="' . $href . '" class="' . $class . '">' . $text . '</a>'; return $html; } /** * Get the Content Grid section. * @return String Final string of this section */ private function getSection_content_grid() { $blocks = get_sub_field('content_columns'); $html = ''; if( count($blocks) > 0 ) : foreach($blocks as $block) { $html .= '<div class="col-sm-' . $block['width'] . ' col-sm-offset-' . $block['offset'] . '">'; $html .= $block['content']; $html .= '</div>'; }; endif; return $html; } /** * Get the Gallery section. * @return String Final string of this section */ private function getSection_gallery() { $images = get_sub_field('images'); $html = ''; switch ( get_sub_field('images_per_row') ) { case '2': $first_class = 'col-sm-offset-2'; $class = 'col-sm-4'; break; case '3': $first_class = ''; $class = 'col-sm-4'; break; case '5': $first_class = 'col-sm-offset-1'; $class = 'col-sm-2'; break; case '6': $first_class = ''; $class = 'col-sm-2'; break; default: $first_class = ''; $class = 'col-sm-3'; break; } if( count($images) > 0 ) : $i = 1; foreach($images as $item) { if( $i === 1 ) $class .= ' ' . $first_class; $html .= '<div class="' . $class . '">'; $html .= '<img src="' . $item['image'] . '" class="' . ($this->use_bs ? 'img-responsive' : '') . '" />'; if( $item['title'] !== '' ) $html .= '<h4>' . $item['title'] . '</h4>'; if( $item['caption'] !== '' ) $html .= '<p>' . $item['caption'] . '</p>'; $html .= '</div>'; $i++; }; endif; return $html; } /** * Get the Raw HTML section. * @return String Final string of this section */ private function getSection_raw_html() { $html = get_sub_field('html'); return $html; } /** * Get the Simple Contact Forms section. * @return String Final string of this section */ private function getSection_simple_contact_forms() { if( !function_exists('simple_contact_form') ) return ''; $options = array(); if( get_sub_field('form_title') !== '' ) $options['form_title'] = get_sub_field('form_title'); if( get_sub_field('button') == true ) { $options['button'] = true; $options['form_collapsed'] = true; if( get_sub_field('btn_text') !== '' ) $options['btn_text'] = get_sub_field('btn_text'); } if( get_sub_field('email_subject') !== '' ) $options['email_subject'] = get_sub_field('email_subject'); $options['return'] = true; $html = simple_contact_form( $options ); return $html; } /** * Get the WYSIWYG section. * @return String Final string of this section */ private function getSection_wysiwyg() { $html = get_sub_field('content'); return $html; } /** * Get the Accordion section. * @return String Final string of this section */ private function getSection_accordion_row() { $blocks = get_sub_field('accordion_row'); $html = ''; if( count($blocks) > 0 ) : foreach($blocks as $block) { $html .= '<div class"accordion-title">'; $html .= $block['accordion-title']; $html .= '</div>'; $html .= '<div class"accordion-content">'; $html .= $block['content']; $html .= '</div>'; }; endif; return $html; } } -
Sorry, far too much to look at. If editing the JSON file causes the error then you’ve probably not edited it correctly and there’s just too much code to figure out here a syntax error could be.
My suggestion would be to import the field group or sync it and make changes and then re-export.
-
ok, so i have managed to get an accordion to display in my page editor, but not sure if this will close the accordion properly? and how to display this in my page builder php properly?
json for accordion:
{ "key": "561538dcw4334t", "name": "accordion_row", "label": "Accordion Row", "display": "block", "sub_fields": [ { "key": "field_5f90caa048f59", "label": "accordion-open", "name": "", "type": "accordion", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "open": 0, "multi_expand": 0, "endpoint": 0 }, { "key": "field_5f95e677d32d0", "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_5f95e686d32d1", "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 }, { "key": "field_5f90cab348f5a", "label": "accordion-end", "name": "", "type": "accordion", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "open": 0, "multi_expand": 0, "endpoint": 1 } ], "min": "", "max": "" },PHP in page builder plugin to display the accordion:
private function getSection_accordion() { $blocks = get_sub_field('accordion_row'); $html = ''; if( count($blocks) > 0 ) : foreach($blocks as $block) { $html .= '<div class"accordion-title">'; $html .= $block['accordion-title']; $html .= '</div>'; $html .= '<div class"accordion-content">'; $html .= $block['accordion_content']; $html .= '</div>'; }; endif; return $html; } -
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; } }
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!