Flexible Content
Dynamic Preview
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” setting 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. |
It is recommended to use available hooks for more advanced control on each file inclusion.
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.jsIn order to display the Flexible Content on your front-end pages, it is recommended to use the has_flexible(): the_flexible() template helper. This helper is a drop-in replacement for the native ACF have_rows(): the_row() code which is used to display classic Flexible Content fields on the front-end.
Instead of using the typical have_rows(): the_row():
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php
if(have_rows('my_flexible_content')):
while(have_rows('my_flexible_content')): the_row();
// Layout: Hero
if(get_row_layout() === 'hero'):
$text = get_sub_field('text');
// layout: Slider
elseif(get_row_layout() === 'slider'):
$text2 = get_sub_field('text2');
endif;
endwhile;
endif;
?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>You should use this code instead:
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php
if(has_flexible('my_flexible_content')){
the_flexible('my_flexible_content');
}
?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>Layouts PHP templates, stylesheets and scripts files will be automatically included and displayed.
This is the layout template file that is included everytime the layout is displayed. Remember this file is included inside the have_rows(): the_row() logic, which means you should use get_sub_field() to retrieve sub fields values.
Example of layout template: 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>If a template file named {your-file}-preview.php is found within the same folder, it will be used in the WP Admin instead of your layout template file.
In this example, it will look for the file layouts/hero/template-preview.php
(Optional) This is the stylesheet file that is enqueued when the layout is displayed. Example of layout stylesheet 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{
}If a stylesheet file named {your-file}-preview.css is found within the same folder, it will be also used in the WP Admin in addition to your layout stylesheet file.
In this example, it will look for the file /layouts/hero/style-preview.css
(Optional) This is the script file that is enqueued when the layout is displayed. Example of layout script file: layouts/hero/script.js
(function($){
$(document).ready(function(){
console.log('document ready: hero layout');
});
})(jQuery);If a script file named {your-file}-preview.js is found within the same folder, it will be used in the WP Admin instead of your script file.
In this example, it will look for the file /layouts/hero/script-preview.js
Change the Layout Template file path programmatically.
/**
* @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){
// use get_stylesheet_directory() to get local path
$file = get_stylesheet_directory() . '/includes/my-template.php';
// do not include the template file
// return false;
// return normally
return $file;
}Change the Layout Stylesheet file path programmatically. Note that it is possible to return a string, or an array to pass all the arguments to the wp_enqueue_style().
/**
* @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){
// get file path or url
$file = get_stylesheet_directory() . '/assets/my-template.css';
// do not include the style file
// return false;
// optional: return an array with arguments to pass to wp_enqueue_style()
// useful if you want to customize the version number for example
$file = array(
'src' => $file,
'deps' => array(),
'ver' => '1.0',
'media' => 'all'
);
// return file path, or an array
return $file;
}Change the Layout Script file path programmatically. Note that it is possible to return a string, or an array to pass all the arguments to the wp_enqueue_script().
/**
* @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){
// get file path or url
$file = get_stylesheet_directory() . '/assets/my-template.js';
// do not include the script file
// return false;
// optional: return an array with arguments to pass to wp_enqueue_script()
// useful if you want to customize the version number for example
$file = array(
'src' => $file,
'deps' => array(),
'ver' => '1.0',
'args' => true
);
// return file path, or an array
return $file;
}Add custom stylesheet/script enqueues using wp_enqueue_style() or wp_enqueue_script(). Here, we’re targeting an entire Flexible Content field:
/**
* @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');
}In order to target specific layouts inside a Flexible Content, use the following variations:
/**
* @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');
}Perform a custom action before the Layout Template PHP file is included.
/**
* @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){
// add wrapper for admin preview only
if($is_preview){
echo '<div class="is-preview">';
}
}Perform a custom action after the Layout Template PHP file is included.
/**
* @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){
// close the wrapper previously added
if($is_preview){
echo '</div>';
}
}These hooks are used to give a visual hint in the UI and won’t affect the actual template/style/script path inclusion.
Change the prepend path of layouts templates displayed in the Flexible Content UI.
/**
* @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;
}Change the prepend path of layouts styles displayed in the Flexible Content UI.
/**
* @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;
}Change the prepend path of layouts scripts displayed in the Flexible Content UI.
/**
* @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;
}