ACF Flexible Content Field – Layout Labels and Sub Field Labels

Updated on 28 Jul 2024

This Pro tutorial provides the steps to output the text of layout labels and/or sub field labels when using the Flexible Content field of Advanced Custom Fields Pro.

Consider this sample field group:

Generally speaking, it is okay to hardcode these texts, but there could be some situations where you want to pull the labels dynamically. This means that if the labels are changed in the field group, the labels will automatically update on the front end without having to manually change the labels in the template/builder to match the updated text.

Update: A JSON export of the field group and JSON code of the fully-built Section from our dev site are provided near the end.

Layout Labels

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

function bl_get_flexible_content_layout_labels( string $field_name, string $layout_name = '' ): array|string|null {
    $field = get_field_object( $field_name );
    $layouts = [];

    if ( $field && $field['type'] === 'flexible_content' && isset( $field['layouts'] ) ) {
        foreach ( $field['layouts'] as $layout ) {
            $layouts[$layout['name']] = $layout['label'];
        }
    }

    if ( ! empty( $layout_name ) ) {
        return isset( $layouts[$layout_name] ) ? $layouts[$layout_name] : null;
    }

    return $layouts;
}

Usage:

<?php

echo bl_get_flexible_content_layout_labels( 'page_content', 'text_image' )

?>

where page_content is the Flexible Content field name and text_image is the layout name.

outputs: Text Image (layout label)

In Bricks:

Whitelist the bl_get_flexible_content_layout_labels function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_get_flexible_content_layout_labels'
  ];
} );

You should also add other functions (native or custom) being used in your Bricks instance besides bl_get_flexible_content_layout_labels. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

{echo:bl_get_flexible_content_layout_labels(page_content,text_image)}

where page_content is the Flexible Content field name and text_image is the layout name.

If you would like to be dynamic so the layout name is automatically taken for a heading/text element inside the ACF Flexible Content query loop, you could instead use:

{echo:bl_get_flexible_content_layout_labels(page_content,{acf_get_row_layout})}

If the second argument is not provided in the function call, an associative array having layout names as the keys and layout labels as values will be returned.

Field Labels

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

function bl_get_flexible_content_field_label( string $flexible_content_name, string $layout_name, string $field_name ): ?string {
    $field_object = get_field_object( $flexible_content_name );
    
    if ( ! $field_object || $field_object['type'] !== 'flexible_content' || ! isset( $field_object['layouts'] ) ) {
        return null;
    }

    foreach ( $field_object['layouts'] as $layout ) {
        if ( $layout['name'] === $layout_name && isset( $layout['sub_fields'] ) ) {
            foreach ( $layout['sub_fields'] as $sub_field ) {
                if ( $sub_field['name'] === $field_name ) {
                    return $sub_field['label'];
                }
            }
        }
    }

    return null;
}

Usage:

<?php

echo bl_get_flexible_content_field_label( 'page_content', 'image_text', 'image' );

where page_content is the Flexible Content field name, image_text is the layout name and image is the field name.

In Bricks:

Whitelist the bl_get_flexible_content_field_label function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_get_flexible_content_field_label'
  ];
} );

You should also add other functions (native or custom) being used in your Bricks instance besides bl_get_flexible_content_field_label. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

{echo:bl_get_flexible_content_field_label(page_content,image_text,image)}

JSON

Field group

Bricks Section

Sample output of get_field_object( ‘page_content’ )

Reference

https://www.advancedcustomfields.com/resources/get_field_object/