Connect to fields in the Advanced Custom Fields plugin (Themer)

Beaver Themer integrates the Advanced Custom Fields (ACF) plugin, letting you use ACF custom fields as field connections, field connection shortcodes, and conditional field connection shortcodes.

If you have advanced custom fields installed, the list of field connections in Beaver Builder modules will display an Advanced Custom Fields category, shown in the following screenshot example of a Heading field, which lets you choose which field connection or shortcode you want to use. For most custom fields, once you choose to connect or insert you'll be asked to enter further options, such as the name of your custom field.

ACF field connection example

Suppose you are creating a Singular theme layout, and you want to display two Advanced Custom Fields associated with your posts: a text field called Location and a number field called 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 your ACF custom Location field, while the heading on the right uses a field connection shortcode to your custom Distance field so that you can append the text "miles" to the number value.

ACF fields supported by Beaver Themer

The following ACF fields are currently supported as Beaver Themer field connections.

  • *ACF Archive field (available in Posts modules)
  • *ACF Post field
    Includes the ACF Radio Button field (as of Beaver Themer 1.2.1). 
  • *ACF Post Author field
  • *ACF User field
  • ACF Option field
  • ACF Relational
  • ACF Repeater field
  • ACF Flexible Content field

Notes about this list:

  • Starred items in the list above appear in the field connection list in Beaver Builder modules and can be used as either field connections or field connection shortcodes. 
  • Unstarred items don't appear in the UI but can be used as field connection shortcodes. 

See the Related Articles for more information about how to use particular ACF field types.

ACF Field connection shortcode syntax

You can follow  the standard procedure for inserting field connections and shortcodes using the Beaver Builder editor, or you can create the shortcodes manually. 

The standard field connection shortcode for ACF fields is shown in the following example (and the other examples in the following section).

	[wpbb post:acf type='text' name='ice-cream-flavor']

where the options are:

  • post:acf 
    Identifies the field as an ACF field.
  •  type 
    The ACF field type, such as  textnumberradio
  • name 
    Your custom field name.

You can also use conditional shortcodes to test for booleans (true/false) or values in which case there are additional options for operator ( exp ) and field value (value). See the Related Articles below.

Tips:

  • The ACF field type should match the Beaver 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.
  • You can also connect to fields on ACF options pages.