Hiding Advanced Custom Fields in the Admin

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.

4 comments

  1. 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.

    1. Hello Andy,

      I looked into this and it appears that this is the case because acf-hidden is the class used by Advanced Custom Fields itself to hide conditionally-hidden fields. If you remove acf-hidden from your WYSWYG field definition and inspect it on the edit page, you will see that it will have the acf-hidden class 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?

Leave a comment

Your email address will not be published. Required fields are marked *