How to display Field Names alongside Field Labels

• lefthookdigital

• July 10, 2019 at 10:03 am

ACF Pro noob here, so forgive me if this is answered elsewhere using better/more specific language:

I’d like to display a field’s name (i.e. the underscored name that goes in the shortcode, aka unique_field_name) next to the field’s label in the backend of any single page I’m editing.

It’s a PITA to go find the field name in the field groups UI when writing content.

It would be so handy to simply access the official shortcode-able field name right there in the interface.

I submitted a support ticket to ACF and received this sorta helpful reply:

You can modify the HTML that is displayed before and after a field input and display the $field[‘name’] by hooking into the following filter:
https://www.advancedcustomfields.com/resources/acf-render_field/

I’d be very grateful if someone here might translate that clue into executable code. I have a child theme and can add to my child functions.php file easily; I just don’t understand what the code should read.

Thanks if anyone can make this simpler for me!

• John Huebner

• July 12, 2019 at 6:33 am

acf/render_field is used to show additional content either before or after the field. You can access information about the field during the filter

add_action('acf/render_field', 'show_field_details', 1);
function show_field_details($field) {
  echo '<p>',$field['name'],' ',$field['key'],'</p>';
}

You could also use acf/prepare_field to modify all the labels https://www.advancedcustomfields.com/resources/acf-prepare_field/

add_filter('acf/prepare_field', 'show_field_details', 1);
function show_field_details($field) {
  $field['label'] .= '<br />'.$field['name'];
  return $field;
}

• lefthookdigital

• July 16, 2019 at 8:55 am

John,

I appreciate the reply. I entered the first sample code you offered (adding rather than replacing) into my child theme’s functions.php file, and it definitely affected a change to the way my fields render when editing any page.

However, the actual value I’m after (the short-code-able field_name) isn’t rendering. Instead, I get a different output. See attached screenshot.

Perhaps there is another value to enter other than ‘name’ to get what I’m after?

Again- the value I want displayed next to the label is the “name” that I use in a shortcode, with underscores between the words comprising the field’s name words.

Example for clarity:

Label: Tom’s Field Example

Name for shortcode: toms_field_example

Image-2019-0....png

• John Huebner

• July 16, 2019 at 10:30 pm

Try using field['_name'] instead of $field['name']

You can see all the values for a field in your filter by adding the following to the start of your filter in order to see what values you may want to use.

echo '<pre>'; print_r($field); echo '</pre>';

• lefthookdigital

• July 17, 2019 at 4:24 am

Yay that did it! Thanks, John!

The preceding underscore was the right field to call (‘_name’ vs ‘name’)

As for knowing what specific value to call in this function… isn’t there a reference published anywhere of these core ACF values?

I’ve search the ACF site and don’t see this particular field (_name) anywhere in any reference doc. Anybody prove me wrong?

• John Huebner

• July 17, 2019 at 4:31 am

I am assuming that you’re using the prepare_field hook. In this case the values for the field have been adjusted, you’re hooking in just before the field is displayed. They may also be adjusted before the render_field hook as well, I don’t honestly remember. In this case there isn’t really any documentation on what the fields attributes might hold. I do know that _name is a temporary field that holds the real field name and name is altered to hold what will be put into the name attribute of the field.

For me it’s just easier and faster to output the field’s settings so I can look at it rather than look up any documentation if it exists.

• lefthookdigital

• July 17, 2019 at 7:53 am

Actually no- I am using the “render field” hook, to simply add the field name to my backend like so:

https://cl.ly/4fea604f2b91

I appreciate your suggestion to simply “output the field’s settings so I can look at it rather than look up any documentation if it exists” but I don’t know how to do that 🙂

But I can follow directions. Hopefully this thread will be useful to the next boob interested in altering the way ACF displays field data in the backend!

• [email protected]

• February 10, 2020 at 6:28 pm

hello @lefthookdigital
i read above thread, i have solution to display fileds along with “_name” and copy it by one click

demo >> http://prntscr.com/r00zwx

in functions.php add below code

/*
|--------------------------------------------------------------------------
| acf admin slug
| https://www.advancedcustomfields.com/resources/acf-render_field/
| https://www.coderomeos.org/select-and-copy-data-to-clipboard-using-jquery
|--------------------------------------------------------------------------
*/
add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');
function my_acf_input_admin_footer() {
	if ( get_post_type() != 'acf-field-group' ) { ?>
		<script type="text/javascript">
            jQuery(function($) {
                $('#wpwrap').each(function(index) {
                    $(this).on('click','.copy-to-clipboard input', function() {
                        $(this).focus();
                        $(this).select();
                        document.execCommand('copy');
                        //$(".copied").text("Copied to clipboard").show().fadeOut(1200);
                    });
                });
            });
		</script>
		<?php
	}
}

// Basic
add_action('acf/prepare_field/type=text', 'show_field_details', 1);
add_action('acf/prepare_field/type=textarea', 'show_field_details', 1);
add_action('acf/prepare_field/type=number', 'show_field_details', 1);
add_action('acf/prepare_field/type=range', 'show_field_details', 1);
add_action('acf/prepare_field/type=email', 'show_field_details', 1);
add_action('acf/prepare_field/type=url', 'show_field_details', 1);
add_action('acf/prepare_field/type=password', 'show_field_details', 1);

// Content
add_action('acf/prepare_field/type=image', 'show_field_details', 1);
add_action('acf/prepare_field/type=file', 'show_field_details', 1);
add_action('acf/prepare_field/type=wysiwyg', 'show_field_details', 1);
add_action('acf/prepare_field/type=oembed', 'show_field_details', 1);
add_action('acf/prepare_field/type=gallery', 'show_field_details', 1);

// Choice
add_action('acf/prepare_field/type=select', 'show_field_details', 1);
add_action('acf/prepare_field/type=checkbox', 'show_field_details', 1);
add_action('acf/prepare_field/type=radio', 'show_field_details', 1);
add_action('acf/prepare_field/type=button_group', 'show_field_details', 1);
add_action('acf/prepare_field/type=true_false', 'show_field_details', 1);

// Relational
add_action('acf/prepare_field/type=link', 'show_field_details', 1);
add_action('acf/prepare_field/type=post_object', 'show_field_details', 1);
add_action('acf/prepare_field/type=page_link', 'show_field_details', 1);
add_action('acf/prepare_field/type=relationship', 'show_field_details', 1);
add_action('acf/prepare_field/type=taxonomy', 'show_field_details', 1);
add_action('acf/prepare_field/type=user', 'show_field_details', 1);

// jQuery
add_action('acf/prepare_field/type=google_map', 'show_field_details', 1);
add_action('acf/prepare_field/type=date_picker', 'show_field_details', 1);
add_action('acf/prepare_field/type=date_time_picker', 'show_field_details', 1);
add_action('acf/prepare_field/type=time_picker', 'show_field_details', 1);
add_action('acf/prepare_field/type=color_picker', 'show_field_details', 1);

// Layout
//add_action('acf/prepare_field/type=message', 'show_field_details', 1);
add_action('acf/prepare_field/type=accordion', 'show_field_details', 1);
//add_action('acf/prepare_field/type=tab', 'show_field_details', 1);
add_action('acf/prepare_field/type=group', 'show_field_details', 1);
add_action('acf/prepare_field/type=repeater', 'show_field_details', 1);
add_action('acf/prepare_field/type=flexible_content', 'show_field_details', 1);
add_action('acf/prepare_field/type=clone', 'show_field_details', 1);

function show_field_details($field) {
	$field['label'] .= '<div class="description copy-to-clipboard" style="margin-bottom: 10px; margin-top: 10px;">
		<input readonly="readonly" type="text" value="'.trim($field['_name']).'" style="color: #0c5460;">
	</div>';
	return $field;
}

add_action('acf/field_group/admin_footer', 'my_acf_field_group_admin_footer');
function my_acf_field_group_admin_footer() { ?>
	<script type="text/javascript">
        (function( $ ){
            $('.description.copy-to-clipboard').remove();
        })(jQuery);
	</script>
	<?php
}

• [email protected]

• February 10, 2020 at 6:35 pm

@hube2
check example above