Tips for using ACF in Gutenberg

T

This post includes my notes and questions as I started working with ACF in WordPress Gutenberg. I’ve captured them here in the hopes that they will assist you in your knowledge growth and implementation.

Advanced Custom Fields (ACF) Pro or Secure Custom Fields

Note, I started working on this before the ACF/SCF debacle, but am publishing this post during the uncertainty of this plugin’s future (October 2024); for more info on the situation, I recommend watching this WPTuts video.

Your site’s architecture

This section helps you consider why and how you would or could use Custom Post Types in WordPress.

First, think through your website’s content and design your site’s architecture.

Use custom post types to make data able to be sliced and diced (sorted and filtered) and shown on various pages. This is the key to making a dynamic website rather than a static website. Post types are buckets of similar content that you can loop through and display wherever you want. Custom post type data does not live statically on a web page.

Examples of website content that are a great fit for custom post types include:

  • Team Members / Staff
  • Services
  • Reviews and Testimonials
  • Products (not products in a shopping cart)
  • Business Locations
  • Physical Service Areas
  • Events
  • Recipes
  • FAQs
  • Documents (Freebies, Manuals, Catalogs, Magazines, PDFs etc)

Next think how you want to organize and sort your custom post type. This is the taxonomy.

In the case of a Staff custom post type, each team member is like a “page” in the Staff custom posts. The taxonomies could be used to categorize Staff by the location where they work, by their role, or by the services that the team members provide.

In the case of a services custom post type, you could assign a taxonomy for Residential or Commercial services.

For the custom post-type testimonials, I can use taxonomy to query and relate testimonials that I’ve included specifically related to an individual team member or a specific service, business location, or product.

Considerations: When do I make a page, a custom post type, or an archive page?

When you create a custom post type, you have to decide if that custom post type should have an Archive page, or not. Your custom post type may not need an archive page if perhaps it will only be looped through on other Pages.


ACF Post Types

The setting to show an Archive page is in the Post Type ACF settings. It is a toggle option. On an Archive Template page, the Post Template block holds the numbers of columns.

A common starter question is how do I make the custom post type only show the fields I create?

Specifically, how do I remove the Gutenberg editor? When you’re using a plugin, there will be a setting option for showing the Editor or not. This is the setting that either includes the Gutenberg editor on your new post type or hides it showing only your custom fields.

How do I display the Custom Post’s Title in my Gutenberg template?

Displaying your Custom Post’s title can be confusing because the Custom Post Title field is not accessed with the MFB block (Meta Field Block) in the Gutenberg editor like the other ACF Fields. Instead, to display the custom post’s title, use the Title block in your custom post’s single post templates.


ACF Taxonomies

There are several places in your UI where you can display, access or edit your taxonomies. The ACF plugin gives you settings to choose visibility and access to these places.

  1. Admin Column – a column for the taxonomy on post type listing screens
  2. Admin Menu – admin editor navigation in the sidebar menu
  3. Meta Boxes – Options to display default Meta Box, Custom Meta Box or no Meta Box

How do I show my new taxonomy as a column in my admin page?

Great question. In ACF, the option to have a taxonomy show in your admin is called Show Admin Column.

Go to ACF > Taxonomies and select your taxonomy. Next, toggle Advanced Configuration. Choose Visibility and toggle Show Admin Column (Display a column for the taxonomy on post type listing screens).

Show an ACF taxonomy as a column in your custom post types admin view.

For example, in the custom post type Staff’s admin screen (image below), Role is my custom post type taxonomy. By toggling on the Show Admin Column in the ACF taxonomy settings, Roles is one of the visible columns on the admin page for Staff.

Custom taxonomy column visible in custom post admin - ACF plugin.

How do I show my new ACF Custom Post’s Taxonomy in the Admin Menu?

The toggle for “Show in Admin Menu” for an ACF Taxonomy linked to a Custom Post allows your Taxonomy name, in this case, “Locations,” to be part of the drop-down menu in the Custom Post’s navigation in the Admin Menu. For instance, I can access Locations from Projects in my WP Admin Menu because I have the Taxonomy for Locations toggled on in Advanced Settings > Visibility > Show in Admin Menu.

Example of ACF Custom Post Taxonomy visible in the Admin Menu

How do I hide my custom project type’s taxonomy boxes?

The term used for the Taxonomy boxes shown on the right side of your edit screen are Meta Boxes. You can adjust the visibility or customize these boxes in your Taxonomy’s advanced settings. Choose “No Meta Box” to hide the taxonomy boxes on your post’s Edit page. Turning off the visibility of the Taxonomies from the Meta Boxes allows you to display the Taxonomy in the Field Group without having the taxonomy options shown in duplicate on the Edit page.

Explain meta box visibility in ACF taxonomies

Once I’ve created my Taxonomies with no meta box, how do I ensure that my selections are saved?

The really important step here is to toggle Save Terms to true in your Field Settings. If you don’t, the changes you make and select on your Custom Post pages will not be saved.

Save Term - connect the selected term to the post

Video: Don’t forget to toggle ON Save for Taxonomies


More about ACF Fields

What is the Meta Key for an ACF field?

ACF uses the field’s name as the meta_key and the value entered as the meta_value. For instance, if I’m looking for the meta_key for a regular ACF field, I’m going to go to ACF > Field Groups and then copy the field’s Name column.

ACF Field Name Column is the Meta Key

If you’re looking for the meta_key for a Group ACF Field, you’ll use the name column for the ACF Group and then underscore and the name for the ACF Subfield.

For instance, if you’re looking for the Meta Key for a sub field in an ACF Group you’ll combine the Group Field’s name “featured_project_details” with the sub field’s group name, “project_gallery” to get a Meta Key of “featured_project_details_project_gallery.”

ACF group field with sub field find Meta Key

Show me how to create a conditional using the ACF Meta Key

For a recent site, in the template for a custom post type, I wanted an image block that was only visible when the custom post type, a project, included a featured image or an image in the ACF sub field gallery type.

To implement this in the WordPress block editor, I am using ACF Pro and the Conditional Blocks plugin.

If I’m making a conditional that says, if this post has a featured image, then I’m using the meta key “_thumbnail_id.” If I’m making a conditional that check’s if this post has any images in the gallery, then I’m using the meta key, “featured_project_details_project_gallery.”

Options for showing ACF Fields in Admin Columns

There is a toggle true option for displaying Taxonomies in your Admin columns, but there is not an option for displaying ACF fields.

You might want to explore one of these two plugins that provide the functionality for you: Admin Columns for ACF Fields (Free) or Admin Columns, but to include functionality for ACF you’ll need the Pro version.

If you’re looking to hand code this, Here’s a good tutorial: https://pluginrepublic.com/add-acf-fields-to-admin-columns/

How do I set up ACF Relational fields?

I found the video by David McCan helpful. He names the fields that are linked with the same names. For instance Staff Location Relationship is the name of the field in both the Staff Custom Post Type and Location Custom Post Type.

I found that I did not have the relationship fields set up correctly in the beginning and so those fields, although showing the content, are not actually linked correctly.

How do I display ACF Relationships in templates?

You’ll need a plugin to display ACF Relationships in your Gutenberg Block Editor templates. If you’re using Bricks, there is a setting in the Query Loop for ACF Relationships.

I did not want to build my WordPress site using a framework, as my development goal was to use the Gutenberg Block Editor and require as few plugins/extras as possible. I found that the MFB block PRO had the functionality to display ACF Relationships.


Common starter questions with ACF

How do I display data from a grouped field in ACF?

How to display grouped s subfields from ACF

How do I control how many ACF custom post results are shown on a template page?

In the Gutenberg editor, my posts showed ten results before being paginated. I could not find where the setting to change that number was from the block editor. There didn’t seem to be a setting to change the quantity of my custom posts.

Finally, I found that the number of results for the custom post type is controlled from the WordPress Dashboard Settings » Reading page. The default in WordPress is 10 posts. Change the “Blog posts show at most” to the quantity you want.

Error Troubleshooting

As I was testing the functionality of the ACF and MFB plugins with the Gutenberg editor, I ran into two issues that took a while to solve. Here’s what was happening:

On the main admin page for a custom post type, I could not get any taxonomies to save. They constantly updated, but did not save. In addition, my relationship fields on a custom post type never loaded the data; they constantly showed as updating.

At first I thought it might be a server issue and perhaps my website was triggering a mod_security rule on the server. There are several forum resources that discuss this issue. However, it turned out that I needed to increase my memory limit. One quick php update to wp-config.php (likely by FTP or file manager) fixed the issue and ACF was able to function correctly.

I added the following code above the default line /* That's all, stop editing! Happy blogging. */

/** Increase WP Memory Limit **/
define('WP_MEMORY_LIMIT', '256M');

Please note that on one of my test sites hosted on WPMUDEV, I was using the very lowest tier for $4/month, and even though you can manually update the WP Memory it is ignored because the hosting tier has a forced WP Memory Limit. My fix was to upgrade to the next tier of hosting.

You can Uninstall and Reinstall the ACF plugin without losing your data

During my troubleshooting, I activated and deactivated all of my plugins. I discovered that my data stayed in tact when I deleted my ACF plugin and then reinstalled and activated the plugin later.

If you change the Post Type Key, the posts you made previously will no longer be visible.

Changing the Post Type Key will break the connection between your post and data. However, your posts are still there (in your database); you can always change your key back to its previous value to bring back all the data.

Other resources

7 Awesome Add-ons for Advanced Custom Fields

Happy WordPressing and Creating of Custom Fields (ACF)

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

By Kelly Barkhurst

Recent Posts

Archives

Categories