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.

Dynamic Preview

Display the layout preview in the administration. The Dynamic Render has to be enabled and configured in order to use that setting.

Click the "Add Row" button below to start creating your layout
0 Cards
Click the "Add Card" button below to start creating your layout
0 Card
0 Header
Title Link
1
0 Hero
0 Newsletter
2 Hero
Flexible Content
Dynamic Preview

Layouts Settings

Once the Dynamic Render setting is enabled, new layouts options will become available, allowing to define specific files for each layouts.

Setting nameDescription
Template FileThe layout PHP template file.
Javascript FileThe layout Javascript file.
Style FileThe layout CSS file.

Note 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 paths, in that order:

  • /wp-content/themes/child-theme/ (Stylesheet Path)
  • /wp-content/themes/parent-theme/ (Template Path)
  • /wp-content/ (WP Content)
  • /(WP Root)

It is technically possible to enter the template path plugins/my-plugin/file.php, as the system will correctly find it in /wp-content/plugins/my-plugin/file.php.

Front-End Render

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{
    
}

Hooks & Filters

Change Template Render Path

/*
 * @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;

}

Change Style Render Path

/*
 * @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;

}

Change Script Render Path

/*
 * @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;

}

Add Custom Enqueue

/*
 * @array   $field       Field settings
 * @array   $layout      Layout settings
 * @bool    $is_preview  True during admin preview
 */
action('acfe/flexible/enqueue',                                          $field, $layout, $is_preview);
action('acfe/flexible/enqueue/name=my_flexible',                         $field, $layout, $is_preview);
action('acfe/flexible/enqueue/key=field_5ff71ef3542c2',                  $field, $layout, $is_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/name=my_flexible', 'my_acf_flexible_enqueue', 10, 3);
function my_acf_flexible_enqueue($field, $layout, $is_preview){

    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/assets/my-style.css');

}

Action Before Layout Render

/*
 * @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();

}

Action After Layout Render

/*
 * @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();

}

Change UI Template Prepend Path

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;

}

Change UI Style Prepend Path

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;

}

Change UI Script Prepend Path

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;

}