How Can I Create Custom Titles for Advanced Custom Fields Flexible Content Blocks

March 28, 2017

Advanced Custom Fields is a great tool for creating custom content areas within WordPress sites. With the Flexible Content field type in ACF, developers are able to create layouts that can be reused and restructured from page to page. The issue with using Flexible Content out of the box is that if you have a lot of flexible layouts blocks being used repeatedly, it can be hard to know what each block is for, especially when looking at the collapsed view in the WordPress Admin.

Here is an example of a page that uses Flexible Content to order a page:

 

Notice that the Columns block is used three times. Each block contains different content, but when the blocks are collapsed, it is hard to know what each block is used for.

Below is a much cleaner example of the same page:

By adding titles to each block, we can easily know what each block refers to from the collapsed view making it easier to edit the appropriate content.

To add titles to your blocks, put the following code into your theme’s functions.php.

 

/*************************************************************/
/*   Friendly Block Titles                                  */
/***********************************************************/

function my_layout_title($title, $field, $layout, $i) {
	if($value = get_sub_field('layout_title')) {
		return $value;
	} else {
		foreach($layout['sub_fields'] as $sub) {
			if($sub['name'] == 'layout_title') {
				$key = $sub['key'];
				if(array_key_exists($i, $field['value']) && $value = $field['value'][$i][$key])
					return $value;
			}
		}
	}
	return $title;
}
add_filter('acf/fields/flexible_content/layout_title', 'my_layout_title', 10, 4);

Now, in the WordPress Admin, go to ‘Custom Fields’ and then to the group that your Flexible Content Layouts are located in.

Create a new text field within each layout and give it a label of ‘Admin Title’ with the field name of ‘layout_title’.

When you are finished adding the field to each Flexible Content layout, click update. Once you go to the page where your Flexible Content Layout Blocks are, you’ll see a new text field named Admin Title.

Fill out the Admin Title for each block that you are using. Once you click save, your new admin labels will appear.

Now you can easily organize all of your blocks in a way that makes the most sense to you!

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive