This is going to be a quick tip today. There are times when you may want to use an Advanced Custom Field for development but don’t want it to clutter the admin interface. One scenario that I have run into, which I plan on blogging about in the future, is adding a unique ID to rows of a repeater. In this way, you can easily target a row’s CSS or target the row in JavaScript.
When you edit a field in Advanced Custom Field, one of the sections is the “Wrapper Attributes.”
One of the options in this section is for a CSS class. Advanced Custom Fields provides a CSS class in the acf-global.css file, acf-hidden. This class is very simple and adds a display: none to the field in the admin. Simply add acf-hidden as a class on your field and it will no longer take up space in the admin interface.
Congratulations on the article produced. I put it into practice and it really worked according to your guidance.
Success for you!
Thank you! Exactly what I was trying to figure out. Keeps the admin nice a tidy!
Interesting: this doesn’t work when I add the acf-hidden class to a WYSIWYG field controlled by conditional logic (ACF field true/false). When set to true, the field opens and displays its content despite being hidden, which is unnecessary if it contains code.
Hello Andy,
I looked into this and it appears that this is the case because
acf-hiddenis the class used by Advanced Custom Fields itself to hide conditionally-hidden fields. If you removeacf-hiddenfrom your WYSWYG field definition and inspect it on the edit page, you will see that it will have theacf-hiddenclass on it. Then ACF toggles that class when the condition for showing the field is true.I suppose a way around this would be to add your own custom class to the admin styles and use that instead of
acf-hidden. I’m curious – why would you set conditions to make the WYSWYG field visible if you want to keep it hidden?