Create connections to Advanced Custom Fields (Themer)

This article assumes that you already know how to use the Advanced Custom Fields plugin, how to create a Singular 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.

For example, suppose you are creating a Singular theme layout, and you want to display two Advanced Custom Fields associated with your posts called Location and Distance, as shown in the following screenshot, 


In this example, all of the text is displayed with Heading modules. In the bottom layer, the heading on the left is a field connection to an Advanced Custom Field, while the heading on the right uses a field connection shortcode so that the text "miles" can be appended. The two procedures below apply to inserting a field connection or field connection shortcode, respectively.

Tips:

  • The ACF field type should match the Page Builder module field type. For example, the Heading field in the Heading module returns text. If you insert a field connection to an ACF Image field, the URL of the image is returned, not the image itself. 
  • If you have an ACF Group field type with subfields, use the group name as a prefix for each subfield, separated by an underscore, such as mygroup_mysubfield1.
  • ACF repeatable fields are not currently supported.

To insert a field connection to an Advanced Custom Field:

  1. In your theme layout, select a module to display the type of field you want to display.
    For example, you can display Text and Number fields with a Heading or Text Editor module, or you can display Image fields with a Photo module.
  2. Click the plus icon to the right of the field.
    The following screenshot shows the Heading field in a Heading module.
  3. Mouse over ACF Post Field in the list and click  Connect.
    Fields that are associated with posts and pages will usually be in the category ACF Post Field.

  4. Select the field type and enter the field name, then click Save.
    Use the field name (in lower case), not its label.
  5. Save the module. 

To insert a field connection shortcode for an Advanced Custom Field:

This procedure lets you add more than one field connection or add text. See the Related Article below for more information about field connection shortcodes.

  1. In your theme layout, select a module to display the type of field you want to display.
    For example, you can display Text and Number fields with a Heading or Text Editor module, or you can display Image fields with a Photo module.
  2. Click the plus icon to the right of the field.
    This example uses the Heading field in a Heading module.
  3. Mouse over ACF Post Field in the list and click Insert.
    Fields that are associated with posts and pages will usually be in the category  ACF Post Field.
  4. Select the field type and enter the field name, then click Save.
    Make sure you use the field name in lower case, not its label.
  5. In the Heading field, add your text before or after the shortcode.
    This screenshot shows the shortcode plus text:
  6. Save the module.