acf/fields/flexible_content/layout_title

Description

Used to modify the $title HTML displayed at the top of each flexible content layout.

Within the filter callback, it is possible to load sub field values via the get_sub_field(), the_sub_field() and get_row() functions and display them within the returned string.

This filter is also run via an AJAX request each time the layout is toggled open or closed.

Here is a before/after visual example to demonstrate how this filter can improve UX.

Changelog

  • Added in version 5.3.6

Parameters

apply_filters( 'acf/fields/flexible_content/layout_title', $title, $field, $layout, $i );
  • $title (string) The layout title text. Defaults to the layout name.
  • $field (array) The field array containing all settings.
  • $layout (array) The layout array containing all settings.
  • $i (int) The layout index beginning at 0.

Modifers

This filter provides modifiers to target specific fields. The following filter names are available:

  • acf/fields/flexible_content/layout_title Applies to all fields.
  • acf/fields/flexible_content/layout_title/name={$name} Applies to all fields of a specific name.
  • acf/fields/flexible_content/layout_title/key={$key} Applies to all fields of a specific key.

Example

This example demonstrates how to customize the title of each Flexible Content layout and display sub field values.

functions.php

<?php
add_filter('acf/fields/flexible_content/layout_title/name=my_flex_field', 'my_acf_fields_flexible_content_layout_title', 10, 4);
function my_acf_fields_flexible_content_layout_title( $title, $field, $layout, $i ) {

    // Remove layout name from title.
    $title = '';

    // Display thumbnail image.
    if( $image = get_sub_field('image') ) {
        $title .= '<div class="thumbnail"><img src="' . esc_url($image['sizes']['thumbnail']) . '" height="36px" /></div>';     
    }

    // load text sub field
    if( $text = get_sub_field('text') ) {
        $title .= '<b>' . esc_html($text) . '</b>';
    }
    return $title;
}

Related