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.
- *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 field connection list 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_optionfor an ACF Option field)
Identifies the field as an ACF field.
The ACF field type, such as
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.
- 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
- You can also connect to fields on ACF options pages.