The ACF (Advanced Custom Fields) flexible content field is a powerful feature that allows you to create dynamic layouts within your WordPress website. However, there may be instances where the flexible content field is not working as expected. Here’s a code snippet that can help you troubleshoot and fix this issue:
/**
* Fix ACF Flexible Content Field not working.
*/
function wpsnippets_fix_acf_flexible_content() {
// Check if ACF is active and flexible content field exists.
if (function_exists('acf_add_local_field_group') && function_exists('get_field')) {
// Get the flexible content field key.
$field_key = 'your_flexible_content_field_key';
// Get the flexible content field value.
$field_value = get_field('your_flexible_content_field_name');
// Check if the flexible content field value exists.
if ($field_value) {
// Loop through the flexible content field layouts.
foreach ($field_value as $layout) {
// Get the layout name.
$layout_name = $layout['acf_fc_layout'];
// Include a template file based on the layout name.
get_template_part('template-parts/flexible-content/' . $layout_name);
}
}
}
}
add_action('wp', 'wpsnippets_fix_acf_flexible_content');
This code snippet checks if the ACF plugin is active and if the flexible content field exists. It then retrieves the value of the flexible content field and loops through each layout. For each layout, it includes a template file based on the layout name. This helps ensure that the flexible content field is properly rendered on the front-end.
To use this code snippet, replace 'your_flexible_content_field_key' with the actual key of your flexible content field and 'your_flexible_content_field_name' with the name of the field as defined in ACF. Additionally, make sure to create template files for each layout in the template-parts/flexible-content/ directory.
This code snippet can be useful when you encounter issues with the ACF flexible content field not working, such as layouts not being displayed or rendered correctly on the front-end. By including this code in your theme’s functions.php file, you can ensure that the flexible content field is properly processed and displayed.
Examples
Example #1: Creating a Flexible Content Field
This example demonstrates how to create a flexible content field using Advanced Custom Fields (ACF) in WordPress. The flexible content field allows users to add and rearrange different content layouts within a page or post.
<?php
if( function_exists('acf_add_local_field_group') ):
acf_add_local_field_group(array(
'key' => 'group_5f7b3b2b6d0a9',
'title' => 'Flexible Content',
'fields' => array(
array(
'key' => 'field_5f7b3b3b6d0aa',
'label' => 'Layouts',
'name' => 'layouts',
'type' => 'flexible_content',
'layouts' => array(
array(
'key' => 'layout_5f7b3b4b6d0ab',
'name' => 'text_block',
'label' => 'Text Block',
'display' => 'block',
'sub_fields' => array(
array(
'key' => 'field_5f7b3b5b6d0ac',
'label' => 'Content',
'name' => 'content',
'type' => 'wysiwyg',
'required' => 1,
'wrapper' => array(
'width' => '100',
'class' => '',
'id' => '',
),
),
),
),
array(
'key' => 'layout_5f7b3b7b6d0ad',
'name' => 'image_block',
'label' => 'Image Block',
'display' => 'block',
'sub_fields' => array(
array(
'key' => 'field_5f7b3b8b6d0ae',
'label' => 'Image',
'name' => 'image',
'type' => 'image',
'required' => 1,
'wrapper' => array(
'width' => '100',
'class' => '',
'id' => '',
),
),
),
),
),
'button_label' => 'Add Layout',
'min' => '',
'max' => '',
),
),
'location' => array(
array(
array(
'param' => 'post_type',
'operator' => '==',
'value' => 'page',
),
),
),
'menu_order' => 0,
'position' => 'acf_after_title',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => true,
'description' => '',
));
endif;
?>
This code example demonstrates how to create a flexible content field using ACF. It defines two layouts: “Text Block” and “Image Block”. Each layout has its own set of sub-fields. The flexible content field allows users to add and rearrange these layouts within a page or post.
Example #2: Displaying Flexible Content Field
This example demonstrates how to display the content of a flexible content field on the front-end of your WordPress website.
<?php
if( have_rows('layouts') ):
while( have_rows('layouts') ): the_row();
if( get_row_layout() === 'text_block' ):
$content = get_sub_field('content');
echo '<div class="text-block">' . $content . '</div>';
elseif( get_row_layout() === 'image_block' ):
$image = get_sub_field('image');
echo '<img src="' . $image['url'] . '" alt="' . $image['alt'] . '">';
endif;
endwhile;
endif;
?>
This code example checks if there are any rows in the flexible content field and loops through each row. It then checks the layout of each row and displays the corresponding content or image based on the layout.
Example #3: Adding Custom Layout to Flexible Content Field
This example demonstrates how to add a custom layout to an existing flexible content field.
<?php
function wpsnippets_add_custom_layout( $layouts ) {
$layouts['layout_5f7b3b9b6d0af'] = array(
'key' => 'layout_5f7b3b9b6d0af',
'name' => 'custom_block',
'label' => 'Custom Block',
'display' => 'block',
'sub_fields' => array(
array(
'key' => 'field_5f7b3bab6d0b0',
'label' => 'Custom Field',
'name' => 'custom_field',
'type' => 'text',
'required' => 1,
'wrapper' => array(
'width' => '100',
'class' => '',
'id' => '',
),
),
),
);
return $layouts;
}
add_filter( 'acf/flexible_content/layouts', 'wpsnippets_add_custom_layout' );
?>
This code example adds a custom layout called “Custom Block” to an existing flexible content field. It defines a new layout with a single sub-field called “Custom Field” of type “text”. The wpsnippets_add_custom_layout function hooks into the acf/flexible_content/layouts filter and adds the custom layout to the existing layouts array.