Create connections to Advanced Custom Fields (Themer)

Watch the video on this topic

This article assumes that you already know how to use the Advanced Custom Fields plugin, how to create a Single type theme layout, and how to use field connections and field connection shortcodes. See the Related Articles for help.

Many websites use the Advanced Custom Fields (ACF) plugin. If you have advanced custom fields set up, the field connections list in Page Builder modules will display an Advanced Custom Fields option that lets you chose which field you want to use. You can also connect to fields on ACF options pages.

Note: The ACF field's type must match the Page Builder module field type. The Heading field in the Heading module can take a text or number type, but not an Image type.

For example, suppose you are using posts to describe walking trails in various cities. You have set up Advanced Custom Fields as follows:

  • rating (Number) (e.g. "5 stars")
  • distance (Number) (e.g. "3.2 miles")
  • city (Text) (e.g. "Albany")

Suppose you want these custom fields to appear just under the title of every trail post, such as in the following screenshot, in which rating, distance and city appears in a row with a gray background color between the title and the post content.

The advanced custom fields appear on the editing page of each post, as shown in the following screenshot. 

Now create a theme layout with type Single and apply it to the relevant posts. When you edit the theme layout in Page Builder, add a module with a field that will use that field type. 

In this example, we created a row with three columns and inserted a Heading module into each one, then used the Heading field in each module to connect to one of the advanced custom fields, as described in these more detailed instructions.

For city:

  1. Choose Advanced custom field from the connection list in the Heading field.
  2. Select the field type and enter the field name, then click Save.
    Make sure you use the field name, not its label.
  3. Save the module and the layout template when you're done editing.

For ratings and distance:

We want to append text to these numerical fields, so we'll use a shortcode for the advanced custom field.

  1. In the Heading field of the Heading module, click the plus sign to display the field connections.
  2. Scroll down to Advanced custom field, mouse over it until the Insert button appears, and click Insert.
  3. Select the field type (Number) and type the field name (rating and distance respectively), then click Save.
    The advanced custom field is entered into the Heading field as a shortcode.
  4. In the Heading field, after the shortcode enter a space and then "stars" or "miles" for the rating and distance numbers respectively.
    This screenshot shows the shortcode plus text for the distance field:
  5. Save the module and the layout template when you're done editing.