Dynamic Render
Render the layouts using a custom template, style & javascript file for each layout. This setting allow developers to split each layouts into components and make the front-end render easier since the system will automatically load the correct files.
Display the layout preview in the administration. The Dynamic Render has to be enabled and configured in order to use that setting.
In order to enable the “Dynamic Render” feature, you have to first enable the “Advanced Settings” switch in the Flexible Content configuration and save the Field Group. Once done, new layouts options will become available, allowing to define specific files for each layouts.
| Setting name | Description |
| Template File | (Optional) The layout PHP template file. |
| Javascript File | (Optional) The layout Javascript file. |
| Style File | (Optional) The layout CSS file. |
Settings path usage example:
[/wp-content/themes/my-theme/] layouts/hero/template.php[/wp-content/themes/my-theme/] layouts/hero/style.css[/wp-content/themes/my-theme/] layouts/hero/script.jsNote that the theme prepend path [/wp-content/themes/my-theme/] displayed in the UI is just a visual hint for the user. The system will actually look for these files in the following folders:
[/wp-content/themes/child-theme/] (Stylesheet Path)[/wp-content/themes/parent-theme/] (Template Path)[wp-content/] (WP Content)[/](WP Root)This means that it is technically possible to enter the template path plugins/my-plugin/hero-template.php, as the system will correctly find it in [/wp-content/] plugins/my-plugin/hero-template.php.
Once configured, you’ll be able to use the new the_flexible() & get_flexible() functions on the front-end. You will no more have to struggle with multiple if & elseif statements, the feature will take care of everything and include the corresponding template/script/style files.
if(has_flexible('flexible_content_field_name')):
the_flexible('flexible_content_field_name');
endif;Template File: /layouts/hero/template.php
<?php
/*
* Hero Layout Render Template.
*
* @array $layout Layout settings (without values)
* @array $field Flexible content field settings
* @bool $is_preview True in Administration
*/
?>
<div class="layout-hero <?php echo ($is_preview) ? 'is-preview' : ''; ?>">
<h1>Hero</h1>
<h3><?php the_sub_field('text'); ?></h3>
</div>Style File: /layouts/hero/style.css
/*
* Hero Layout
*/
.layout-hero{
background:#fafafa;
padding:50px 0;
}
.layout-hero h1{
font-size:50px;
}
/*
* Hero Layout: Admin Preview
*/
.layout-hero.is-preview{
}/*
* @string $file File path
* @array $field Field settings
* @array $layout Layout settings
* @bool $is_preview True during admin preview
*/
filter('acfe/flexible/render/template', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/template/name=my_flexible', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/template/key=field_5ff71ef3542c2', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/template/layout=my_layout', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/template/name=my_flexible&layout=my_layout', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/template/key=field_5ff71ef3542c2&layout=my_layout', $file, $field, $layout, $is_preview);
add_filter('acfe/flexible/render/template/layout=my_layout', 'my_acf_layout_template', 10, 4);
function my_acf_layout_template($file, $field, $layout, $is_preview){
$file = get_stylesheet_directory() . '/includes/my-template.php';
// Do not include the template file
// return false;
return $file;
}/*
* @string $file File path
* @array $field Field settings
* @array $layout Layout settings
* @bool $is_preview True during admin preview
*/
filter('acfe/flexible/render/style', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/style/name=my_flexible', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/style/key=field_5ff71ef3542c2', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/style/layout=my_layout', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/style/name=my_flexible&layout=my_layout', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/style/key=field_5ff71ef3542c2&layout=my_layout', $file, $field, $layout, $is_preview);
add_filter('acfe/flexible/render/style/layout=my_layout', 'my_acf_layout_style', 10, 4);
function my_acf_layout_style($file, $field, $layout, $is_preview){
$file = get_stylesheet_directory() . '/assets/my-template.css';
// Do not include the style file
// return false;
return $file;
}/*
* @string $file File path
* @array $field Field settings
* @array $layout Layout settings
* @bool $is_preview True during admin preview
*/
filter('acfe/flexible/render/script', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/script/name=my_flexible', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/script/key=field_5ff71ef3542c2', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/script/layout=my_layout', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/script/name=my_flexible&layout=my_layout', $file, $field, $layout, $is_preview);
filter('acfe/flexible/render/script/key=field_5ff71ef3542c2&layout=my_layout', $file, $field, $layout, $is_preview);
add_filter('acfe/flexible/render/script/layout=my_layout', 'my_acf_layout_script', 10, 4);
function my_acf_layout_script($file, $field, $layout, $is_preview){
$file = get_stylesheet_directory() . '/assets/my-template.js';
// Do not include the style file
// return false;
return $file;
}Targeting the entire Flexible Content:
/*
* @array $field Field settings
* @bool $is_preview True during admin preview
*/
action('acfe/flexible/enqueue', $field, $is_preview);
action('acfe/flexible/enqueue/name=my_flexible', $field, $is_preview);
action('acfe/flexible/enqueue/key=field_5ff71ef3542c2', $field, $is_preview);
add_action('acfe/flexible/enqueue/name=my_flexible', 'my_acf_flexible_enqueue', 10, 2);
function my_acf_flexible_enqueue($field, $is_preview){
wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/assets/my-style.css');
}Targeting a specific Layout in the Flexible Content:
/*
* @array $field Field settings
* @array $layout Layout settings
* @bool $is_preview True during admin preview
*/
action('acfe/flexible/enqueue/layout=my_layout', $field, $layout, $is_preview);
action('acfe/flexible/enqueue/name=my_flexible&layout=my_layout', $field, $layout, $is_preview);
action('acfe/flexible/enqueue/key=field_5ff71ef3542c2&layout=my_layout', $field, $layout, $is_preview);
add_action('acfe/flexible/enqueue/layout=my_layout', 'my_acf_layout_enqueue', 10, 3);
function my_acf_layout_enqueue($field, $layout, $is_preview){
wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/assets/my-style.css');
}/*
* @array $field Field settings
* @array $layout Layout settings
* @bool $is_preview True during admin preview
*/
action('acfe/flexible/render/before_template', $field, $layout, $is_preview);
action('acfe/flexible/render/before_template/name=my_flexible', $field, $layout, $is_preview);
action('acfe/flexible/render/before_template/key=field_5ff71ef3542c2', $field, $layout, $is_preview);
action('acfe/flexible/render/before_template/layout=my_layout', $field, $layout, $is_preview);
action('acfe/flexible/render/before_template/name=my_flexible&layout=my_layout', $field, $layout, $is_preview);
action('acfe/flexible/render/before_template/key=field_5ff71ef3542c2&layout=my_layout', $field, $layout, $is_preview);
add_action('acfe/flexible/render/before_template/layout=my_layout', 'my_acf_before_layout', 10, 3);
function my_acf_before_layout($field, $layout, $is_preview){
// do_something();
}/*
* @array $field Field settings
* @array $layout Layout settings
* @bool $is_preview True during admin preview
*/
action('acfe/flexible/render/after_template', $field, $layout, $is_preview);
action('acfe/flexible/render/after_template/name=my_flexible', $field, $layout, $is_preview);
action('acfe/flexible/render/after_template/key=field_5ff71ef3542c2', $field, $layout, $is_preview);
action('acfe/flexible/render/after_template/layout=my_layout', $field, $layout, $is_preview);
action('acfe/flexible/render/after_template/name=my_flexible&layout=my_layout', $field, $layout, $is_preview);
action('acfe/flexible/render/after_template/key=field_5ff71ef3542c2&layout=my_layout', $field, $layout, $is_preview);
add_action('acfe/flexible/render/after_template/layout=my_layout', 'my_acf_after_layout', 10, 3);
function my_acf_after_layout($field, $layout, $is_preview){
// do_something();
}This hook will change the prepend path of layouts templates displayed in the Field Group UI. This won’t affect the actual template path during inclusion.
Note this path is initially based on the theme_folder global setting which is automatically detected by ACF Extended.
/*
* @array $prepend Prepend path (initial: /wp-content/themes/my-theme/)
* @array $field Field settings
* @bool $layout Layout settings
*/
filter('acfe/flexible/prepend/template', $prepend, $field, $layout);
filter('acfe/flexible/prepend/template/name=my_flexible', $prepend, $field, $layout);
filter('acfe/flexible/prepend/template/key=field_5ff71ef3542c2', $prepend, $field, $layout);
filter('acfe/flexible/prepend/template/layout=my_layout', $prepend, $field, $layout);
filter('acfe/flexible/prepend/template/name=my_flexible&layout=my_layout', $prepend, $field, $layout);
filter('acfe/flexible/prepend/template/key=field_5ff71ef3542c2&layout=my_layout', $prepend, $field, $layout);
add_filter('acfe/flexible/prepend/template/layout=my_layout', 'my_acf_layout_template_prepend', 10, 3);
function my_acf_layout_template_prepend($prepend, $field, $layout){
$prepend = '/custom/';
return $prepend;
}This hook will change the prepend path of layouts styles displayed in the Field Group UI. This won’t affect the actual style path during inclusion.
Note this path is initially based on the theme_folder global setting which is automatically detected by ACF Extended.
/*
* @array $prepend Prepend path (initial: /wp-content/themes/my-theme/)
* @array $field Field settings
* @bool $layout Layout settings
*/
filter('acfe/flexible/prepend/style', $prepend, $field, $layout);
filter('acfe/flexible/prepend/style/name=my_flexible', $prepend, $field, $layout);
filter('acfe/flexible/prepend/style/key=field_5ff71ef3542c2', $prepend, $field, $layout);
filter('acfe/flexible/prepend/style/layout=my_layout', $prepend, $field, $layout);
filter('acfe/flexible/prepend/style/name=my_flexible&layout=my_layout', $prepend, $field, $layout);
filter('acfe/flexible/prepend/style/key=field_5ff71ef3542c2&layout=my_layout', $prepend, $field, $layout);
add_filter('acfe/flexible/prepend/style/layout=my_layout', 'my_acf_layout_style_prepend', 10, 3);
function my_acf_layout_style_prepend($prepend, $field, $layout){
$prepend = '/custom/';
return $prepend;
}This hook will change the prepend path of layouts scripts displayed in the Field Group UI. This won’t affect the actual script path during inclusion.
Note this path is initially based on the theme_folder global setting which is automatically detected by ACF Extended.
/*
* @array $prepend Prepend path (initial: /wp-content/themes/my-theme/)
* @array $field Field settings
* @bool $layout Layout settings
*/
filter('acfe/flexible/prepend/script', $prepend, $field, $layout);
filter('acfe/flexible/prepend/script/name=my_flexible', $prepend, $field, $layout);
filter('acfe/flexible/prepend/script/key=field_5ff71ef3542c2', $prepend, $field, $layout);
filter('acfe/flexible/prepend/script/layout=my_layout', $prepend, $field, $layout);
filter('acfe/flexible/prepend/script/name=my_flexible&layout=my_layout', $prepend, $field, $layout);
filter('acfe/flexible/prepend/script/key=field_5ff71ef3542c2&layout=my_layout', $prepend, $field, $layout);
add_filter('acfe/flexible/prepend/script/layout=my_layout', 'my_acf_layout_script_prepend', 10, 3);
function my_acf_layout_script_prepend($prepend, $field, $layout){
$prepend = '/custom/';
return $prepend;
}