ACF Companion comes with over 20 CSS classes to allow you to craft a stunning content management experience for site editors.
N.B. The classes go at the bottom of the of the field settings on the Edit Field Group screen.
When you’re conditionally hiding a field with the true/false field, you may want to add a padding left so the conditionally hidden field feels related to the true/false toggle.
Use the classes below to add padding left. Choose the relevant modifier for the depth of conditional. For example, if you’re conditionally hiding a field with the True/False toggle, which itself is conditionally hidden, then use
acfc-padding-left--m, or for two levels of depth use
acfc-padding-left--s acfc-padding-left--m acfc-padding-left--l
To give the toggle a nice finish we’re making clever use of the On Text, Off Text and Message values, download the example JSON below to see an example.
How do I import a JSON?
Go to Custom Fields >> Tools, under the Import Field Groups section click Choose File and when the file is selected click Import Group. Once imported, head to Custom Fields >> Field Groups where you’ll see your newly imported field group titled ACFC Options Page Example.
Pretend Button (pseudo button)
In addition to transforming the True/False field in to a toggle (above), you can also transform the true/false field in to a pretend button, that fits perfectly with the WP UI. To do so, simply add this class:
Similar to the toggle (above), we’re making clever use of the On Text, Off Text and Message values, download the example JSON below to see an example.
Easily convert tabs in to a settings button. Great for when you want to separate fields in to a separate tab, and don’t need more than two tabs.
Currently it’s not possible to add classes straight to tabs; the way we get around this is by adding the class
acfc-tabs-helper to the field above the tabs.
If there isn’t a field above, then we simply add one, and give it the classes
acfc-tabs-helper acfc-hidden. An empty message field works well.
Give the buttons a Gutenberg-style makeover. And combine them with dashicons to bring them to life.
Although you could add icons, or a custom font for icons, the WordPress dashicons custom font already loads for you, and you can easily use icons from it by copying the html for the icon. This is a very quick and convenient way to add a visual flare to your buttons and makes editing content all that nicer.
Here is an example showing text align buttons using dashicons:
left : <span class="dashicons dashicons-editor-alignleft">Left aligned</span> center : <span class="dashicons dashicons-editor-aligncenter">Center aligned</span> right : <span class="dashicons dashicons-editor-alignright">Right aligned</span>
These would go in the Choices textarea when editing the button group field.
Adding a tick to the button
Add a tick to the button that’s selected. This adds an additional visual marker of the selected button, which is great for when your buttons are a little larger, and they are also accessible as only relying on colour can cause issues for people with colour blindness.
<span class="dashicons dashicons-yes"></span> - Selected</span>
Transform the accordion in to a help button that looks and feels just like WordPress.
Just like the tabs, it’s not possible to add a class to an accordion, so we use a helper class on the field above instead.
Transform the repeater in to a masterpiece of UI magic, with more screen real estate and tight integration with the Gutenberg UI. If you’ve ever looked at the repeater and gone “hhmm, if only this was better”, then you’re going to love this!
This makes clones fit seamlessly, so they don’t look like clones (phew).
This one is short and sweet. Adds a min-width to the range input and sets the padding so it doesn’t (or shouldn’t) get overwritten by front-end styles.
These classes allow you to add negative margins to your fields. The n stands for negative (obvs).
acfc-margin-top--ns acfc-margin-top--nm acfc-margin-top--nl
Add a WordPress styled notice to your fields. Add this class to the message field and add your content as needed.
Things without classes
Some things are styled automatically without the need to add classes. These are:
- Fields in the main Gutenberg content area. These are styled to make things feel more Gutenbergy.