It would be great to have control over a fields individual label. So often, with things like repeatable content or flexible content areas, there are just too many labels. They’re not needed, and it just takes up loads of space.
Sometimes I leave the field label blank. But that makes it harder to spot what you’re doing when editing ACF configurations.
I’d love to be able to leave field labels in, but have to the option not to display them on a per field basis.
Hi @lletnek
If you want to request a new feature, please open a new ticket here: http://support.advancedcustomfields.com/new-ticket/.
As a workaround, you can add style codes using acf/input/admin_head hook. It should be something like this:
function my_acf_admin_head() {
?>
<style type="text/css">
.acf-field-1234567890 > .acf-label {display: none;}
</style>
<?php
}
add_action('acf/input/admin_head', 'my_acf_admin_head');
You can get the key by enabling the “Field Keys” option in the Screen Options.
I hope this helps.
@acf-support thanks for the suggestion. I’m quite experienced, but first time I need to dig inside the acf css. The hook is freaking awesome and useful
I know it’s been a year but, in case this can help someone, this seems to do it, at least for me:
add_action('acf/render_field_settings', 'hidelabel_render_field_settings');
function hidelabel_render_field_settings( $field ) {
acf_render_field_setting( $field, array(
'label' => __('Hide Label?'),
'instructions' => '',
'name' => 'hide_label',
'type' => 'true_false',
'ui' => 1,
), true);
}
add_filter('acf/prepare_field', 'hidelabel_prepare_field');
function hidelabel_prepare_field( $field )
{
if ($field['hide_label'])
echo '
<style type="text/css">
.acf-field-', substr($field['key'],6),' > .acf-label {display: none;}
</style>';
return $field;
}
Hi @neurodesigns
Thanks for the follow up.
This will surely assist someone in the same situation.
Thanks @James.
I believe that as long as core code remains the same – field structure/class/prefix – there is no need to add code for each field.
Also, it works for repeater fields too. Something that I needed.
If I can be of any assistance, let me know.
Just a quick comment; if anyone tries the code above by @acf-support there’s a period missing before “acf-label”:
.acf-field-1234567890 > acf-label {display: none;}
should be
.acf-field-1234567890 > .acf-label {display: none;}
Hi @adrian-b
Thanks a lot for pointing out.
I have edited the solution to include the correction 🙂
@neurodesigns your solution is great! I noticed that it adds and/or leaves a border above the removed label. If I use simple CSS, the line does not appear. Is the filter and/or action adding the border? I’m not seeing what’s adding it.
This reply has been marked as private.
@neurodesigns your little function is just perfect, and is exactly what was missing. Thank you!
I was just leaving the labels blank before but that gets confusing quickly. This should definitely be incorporated into the plugin.
I recently had issues making this work on some fields because their keys were formatted a little differently, causing the substr call to get the wrong value. You may be able to solve for this by working from the end of the field ID string rather than the beginning.
substr($field['key'],-13)
Of course, this is similarly (if not more) brittle, as it still depends on the format of ACF’s field IDs being consistent. Consider printing out your field IDs to take a look at them if you’re having trouble, and adjust accordingly.
I definitely vote for this to be a first-class feature of the plugin—it’s much less confusing than just leaving the label field blank!
Just to say thanks to @James for pointing this hook. Its Jan, 2021 now…
WP 5.6, ACF PRO 5.9.3
ACF pro stopped showing the keys… with “display:none”.
I went a little further, but this is the idea:
function my_acf_admin_head() {
?>
<style type="text/css">
#acf-field-group-fields .li-field-key {
display: block;
width: 15%;
}
#acf-field-group-fields .li-field-type {
width: 10%;
}
#acf-field-group-fields .li-field-name {
width: 20%;
}
</style>
<?php
}
add_action('acf/input/admin_head', 'my_acf_admin_head');
How about using the acf class attribute?
I just add an ‘hide-title’ class in the field edition.
And in the css .hide-title .acf-label {display: none}
Works like a charm for me.
How about using the acf class attribute?
Genius. Good reminder to read these threads from the bottom up. Cheers.
