How to Create WordPress Custom Fields with ACF

If you have been using WordPress for a quite while, you might already know about custom field. It’s one of the customization features offered by WordPress to allow you to create fully customizable website. Mastering custom field will give you a bunch of benefits especially if you create website for clients.

You can add features and functionalities to the website you are working without installing too many plugins. For instance, if you are creating an animal adoption site, you can create custom fields to store the additional information that cannot be handled by WordPress editor.

Or, if you are creating a movie review website, you can add custom fields such as movie rating, movie genre, and so on to store the information about a movie rating and movie genre in separate metadata. This will give you the flexibility to sort and format your content.

Advanced Custom Fields or often shortened as ACF is one of the most popular plugins to create WordPress custom fields. In this article, we will show you how to create custom fields using ACF.

How to Create WordPress Custom Fields Using ACF

You can use ACF for free as it is released as a freemium plugin. You can download the free version of the plugin on the WordPress plugin directory. The free version of ACF supports the following field types:

ACF itself is compatible with most page builder plugins, including Divi Builder, Elementor, and Brizy. You can display the data submitted via your custom fields on those page builder plugins.

Assuming you have installed and activated the ACF plugin (you can read this article to install a WordPress plugin in case you are new to WordPress), go to Custom Fields -> Add New on your WordPress dashboard. Give your custom field group a name. To start adding the custom field, you can click the Add Field button.

Clicking the Add Field button above will open a form where you can add the field label, field name, field type, and so on. Two key parameters you need to are the field label and field type. You can also set character limit on the Character Limit option. If you want to set the field as a required field, you can enable the Required? option.

You can repeat the steps above to add more fields. You can set the order of the fields by dragging them downward or upward. If you want to edit an existing field, you can hover your mouse over the field you want to edit and click the Edit link. To delete it, simply click the Delete link.

Once done adding the fields, go to the Location block to set where you want to assign the field group to. You can assign the custom field group to posts (blog posts), pages, custom post types, taxonomies, and so on. In this example, we will assign the custom field group to blog posts so we set the rule as follows (you can add multiple rules).

Next, open the Settings block to set the placement of the custom field group. You can place the field group beneath the WordPress content editor or to the right sidebar. You can set the placement on the Position option. You can also set the style and label placement if you want it. Click the Publish button to publish the custom field group.

That’s it. Your custom field group is ready to use. You should see a new set of custom fields beneath the WordPress content editor (or on the right panel, according the placement you set) every time you create a new blog post (assuming you assign the custom field group to blog posts).

Displaying the Custom Fields

Using a page builder is the easiest way to display the data of your custom fields. As mentioned above, ACF is compatible with major WordPress page builder plugins such as Divi Builder, Elementor, and Brizy. In this article, we will show you how to display custom fields using Brizy page builder.

The integration feature with ACF is only available on the pro version of Brizy so you need to upgrade your Brizy to the pro version in case you haven’t done so.

First off, create a new page or template and edit it with Brizy (read this post if you are new to Brizy). On the Brizy editor, add the Text element to the canvas area.

Highlight or delete the default text content and press the hash key (the ‘#’ symbol) on your keyboard. As you can see, Brizy will display the full list of the custom fields you can add to your design. Usually, the custom fields you created with ACF (and other custom field plugins) appear in the top section. Simply select the custom field you want to add.

You can add multiple custom fields in a single line (inline) if you want. Once done adding the custom fields, you can then style them up just like when you are styling up the regular static text element.