Advanced Custom Fields (ACF) is a plugin to organise custom fields. If you are not familiar with it then check out their website.

ACF is very customisable, however, we have a tendency to overuse it. What effect does this have? Well not only does it grow your database unnecessarily, but it also makes the admin panel more complicated than it needs to be.

In this article, we will be providing a few tips on how you can tidy up your ACF fields…

1. One Field For All

Depending on your content, a single WYSIWYG can represent multiple fields.

As an example, let’s say we have the following fields; Title, Description, Button Text and Button URL. Like so:

If you aren’t planning to do a special operation on individual fields, just combine them into a WYSIWYG:

Then what we can do is add a default value indicating the content placement:

Much cleaner and easier right?

2. Galleries as a Pseudo-Repeater

A repeater is an awesome feature, it’s flexible and easy to edit… but did you know that it pollutes your postmeta table?

Let’s say you have a simple Repeater (single image + couple of text fields), you can get away by using the Gallery and the image’s metadata instead.

Shown below is a Meet the Team repeater:

So we converted this to a Gallery:

You can then convert your page template file code to:-

<?php

$team_members = get_field('team');
if( $team_members ): ?>
  <section class="team">
  <?php foreach( $team as $person ): ?>
    <div id="team-wrapper">
      <img src="<?php echo $person['sizes']['medium']; ?>"
           alt="<?php echo $person['title']; ?> Photo" >
      <h3>
        <?php echo $person['title']; ?>
      </h3>
      <?php echo wpautop( $person['caption'] ); ?>
      <p class="job-desc">"<?php echo $person['description']; ?>"></p>
    </div>
  <?php endforeach; ?>
  </section>
<?php endif; ?>

3. Simplify Basic WYSIWYG

When creating a WYSIWYG field, you can change the Toolbar to be ‘Basic’. But it still has too many buttons on it…

The snippets below will control which buttons you want to show:

functions.php

add_action( 'admin_enqueue_scripts', 'my_admin_assets', 100 );

function my_admin_assets() {
  $css_dir = get_stylesheet_directory_uri() . '/css';

  wp_enqueue_style( 'my-admin', $css_dir . '/my-admin.css' );
}

css/my-admin.css

.acf-field-wysiwyg [data-toolbar="basic"] .mce-btn {
  display:none; /* hide all buttons */
}

.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Bold"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Italic"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Bulleted"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Numbered"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Align center"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="edit link"] {
  display:inline-block;
}

.acf-field-wysiwyg [data-toolbar="basic"] .mce-edit-area {
  height:150px !important;
}

Our 3 tips to use ACF more efficiently:

1. Combine multiple fields into WYSIWYG.
2. Use Gallery as replacement of Repeater (if content is simple).
3. Simplify the Toolbar in Basic WYSIWYG using CSS.

If you have any question or additional tips to share, please leave a comment below. I will definitely reply to you 🙂