Adding additional layout to flexible_content field in child theme

• qco

• January 29, 2016 at 5:10 am

I’m not sure this is possible, and perusing the forums and documentation hasn’t yielded any results.

We want to be able to extend, in a child theme, the ‘layouts’ portion of a flexible_content field that is defined in a parent theme. We have a flexible_content field in use to create page composer for a theme, but we want to be able to have child themes add additional layouts to the Page Composer options. This helps to keep the parent theme from becoming bloated with too many unnecessary features, and we can have child themes that can fully extend this capability, to add their own flexible content types.

If the parent theme defines a flexible content field as follows:

acf_add_local_field_group(array (
	'key' => 'acf_page-composer',
	'title' => 'Page Composer',
	'fields' => array (
		array (
			'key' => 'field_page_composer',
			'label' => 'Page Composer',
			'name' => 'page_composer',
			'type' => 'flexible_content',
			'layouts' => array (
				array (
					'label' => 'Grid/Slider',
					'name' => 'grid_slider',
					'display' => 'row',
					'min' => '',
					'max' => '',
					'sub_fields' => array (...),
				),
				array (
					'label' => 'Latest By Category',
					'name' => 'latest_by_category',
					'display' => 'row',
					'min' => '',
					'max' => '',
					'sub_fields' => array (...),
				),
			),
			'button_label' => 'Add Section',
			'min' => '',
			'max' => '',
		),
	),
	'location' => array (
		array (
			array (
				'param' => 'page_template',
				'operator' => '==',
				'value' => 'page-composer.php',
				'order_no' => 0,
				'group_no' => 0,
			),
		),
	),
	'options' => array (
		'position' => 'normal',
		'layout' => 'no_box',
		'hide_on_screen' => array (
			0 => 'the_content',
		),
	),
	'menu_order' => 0,
));

Is it then possible for a child theme to add a layout (via PHP) in addition to the “Grid/Slider” and “Latest by Category” layouts? Using acf_add_local_field with the flexible_layout field as the parent does not work. Is there any sort of function to add a new layout that will then be available for selection within the parent theme’s flexible_layout field?

• John Huebner

• January 29, 2016 at 12:40 pm

I did some testing, not sure if this will help you but it’s what I came up with. The only problem I can see is if you have additional field in the group and this would put your flex field at the end of the group.

<?php 
  add_action('init', 'add_a_layout', 20);
  function add_a_layout() {
    //echo 'here'; die;
    $layout = array (
      'key' => '56aab6d4e6272XXX',
      'name' => 'layout_2',
      'label' => 'layout 2',
      'display' => 'block',
      'sub_fields' => array (
        array (
          'key' => 'field_56aab6e3cba39XX',
          'label' => 'test field 2',
          'name' => 'test_field_2',
          'type' => 'text',
          'instructions' => '',
          'required' => 0,
          'conditional_logic' => 0,
          'wrapper' => array (
            'width' => '',
            'class' => '',
            'id' => '',
          ),
          'default_value' => '',
          'placeholder' => '',
          'prepend' => '',
          'append' => '',
          'maxlength' => '',
          'readonly' => 0,
          'disabled' => 0,
        ),
      ),
      'min' => '',
      'max' => '',
    );
    $field = acf_get_field('field_56aab6cdcba38');
    $field['layouts'][] = $layout;
    acf_remove_local_field('field_56aab6cdcba38');
    acf_add_local_field($field);
  }
?>

• yratof

• May 31, 2016 at 5:30 pm

Taking a look at your code john, I can’t seem to get the subfields to pass through this argument – when using acf_get_filed, layouts drop all sub fields and the end result is no layout options.

Did you find a way for this to work?

• John Huebner

• June 1, 2016 at 6:39 am

Having a field group defined in the parent theme and then adding to it in a child theme is not something there is any documentation on, or something that I’ve done. If I were going to do this I would.

1) Create a function in my parent theme that creates the needed field group.
2) Create a custom hook that will allow me to filter that field group.

something like this

// in parent theme
add_action('acf/include_fields', 'parent_theme_group');
function parent_theme_group() {
  $field_group = array(
    // definition of field group here
  );
  $field_group = apply_filters('my_custom_hook_name', $field_group);
  acf_add_local_field_group($field_group);
}

// in the child theme
add_filter('my_custom_hook_name', 'add_to_parent_theme_group');
function add_to_parent_theme_group($group) {
  // modify $group
  return $group;
}

• yratof

• December 12, 2016 at 11:38 pm

I’ve managed to solve this: https://gist.github.com/yratof/9abc805a64c1504ec2b282aaa9a3beaa

This script gives you an idea of how to hook into the layouts to remove & add at the bottom – working on a nice way of displaying this, but this works for now