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.

ACF Extended

Features Roadmap Blog

Dynamic Render

Learn more Documentation

#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

Cards

Click the "Add Card" button below to start creating your layout

0 Card

Icon

Title

Content

Add Card

Close

0 Header

Links

	Title	Link
1

Add Link

Close

0 Hero

Title

Subtitle

Icon

Close

0 Newsletter

Placeholder

Button

Close

1 Header

ACF Extended

Features Roadmap Blog

Links

	Title	Link
1
2
3
1

Add Link

Close

2 Hero

Flexible Content

Dynamic Preview

Learn more Documentation

Title

Subtitle

Icon

Close

#Layouts Settings

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.js

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 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.

#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`

Note: If a template file named {your-file}-preview.php is found within the same folder, it will be used in the WP Admin/Preview instead of your layout template file. In this example, it will look for the file /layouts/hero/template-preview.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>

#Stylesheet File: `/layouts/hero/style.css`

Note: If a stylesheet file named {your-file}-preview.css is found within the same folder, it will be also used in the WP Admin/Preview, in addition to your layout stylesheet file. In this example, it will look for the file /layouts/hero/style-preview.css.

/**
 * Hero Layout
 */
.layout-hero{
    background:#fafafa;
    padding:50px 0;
}
.layout-hero h1{
    font-size:50px;
}
/*
 * Hero Layout: Admin Preview
 */
.layout-hero.is-preview{
    
}

#Script File: `/layouts/hero/script.js`

Note: If a script file named {your-file}-preview.js is found within the same folder, it will be used in the WP Admin/Preview instead of your script file. In this example, it will look for the file /layouts/hero/script-preview.js.

(function($){

    $(document).ready(function(){
        console.log('document ready: hero layout');
    });

})(jQuery);

#Template Render Path

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;

}

#Stylesheet Render Path

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;

}

#Script Render Path

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;

}

#Custom Enqueue

Add custom stylesheet/script enqueues using wp_enqueue_style() or wp_enqueue_script(). Here, we’re 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');

}

Add custom stylesheet/script enqueues, targeting a specific Layout inside a 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');

}

#Before Layout Render

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

    // do_something();

}

#After Layout Render

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

    // do_something();

}

#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;

}

#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;

}

#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;

}

Dynamic RenderFREE

#Dynamic Render

#Dynamic Preview

#Layouts Settings

#Front-End Render

#Template File: /layouts/hero/template.php

#Stylesheet File: /layouts/hero/style.css

#Script File: /layouts/hero/script.js

#Template Render Path

#Stylesheet Render Path

#Script Render Path

#Custom Enqueue

#Before Layout Render

#After Layout Render

#UI Template Prepend Path

#UI Style Prepend Path

#UI Script Prepend Path

#Template File: `/layouts/hero/template.php`

#Stylesheet File: `/layouts/hero/style.css`

#Script File: `/layouts/hero/script.js`