Field connection basics (Themer)

Theme Builder field connections work like variables. They let you connect certain Page Builder row and module settings to external data on your site, such as post titles, featured images, and custom fields (WordPress, Advanced Custom Fields plugin, Pods Beaver Theme Add-on). This allows a Theme Builder layout to change the content it delivers for each page to which it applies, as you can see in this animation, where the post title changes in the theme layout as you change the page preview.

Besides Theme Builder layouts, field connections work in rows and modules in Page Builder and in saved rows and modules.

There are two ways to add field connections:

  • The field connection is the single value in a module field.
    For example, the Heading field in the Heading module connects to the post title. See the examples in the next section.
  • The field connection is inserted as shortcode into a text field so you can add other text.
    For example, you might want the Heading field to display
    [ Post Title] by [Author]
    on a single line.
    For more information about field connection shortcodes, see the Related Articles below.

Field connection examples

1. Heading displays post title

Suppose you're building a layout where you want a Heading module to display the title of your post or page, such as this screenshot:

To do this, in your layout's first Heading module, you'd connect the Heading field to the Post Title

As long as the Theme Builder plugin (Beaver Themer) is installed, row and module settings that can take field connections appear with a plus sign next to them. When you click the plus sign, the eligible connections for that field are displayed, as shown in the following screenshot. You can scroll down through the list or use the search field at the top of the list and choose the connection you want.

2. Photo module displays featured image

Suppose you have a theme layout that applies to posts, and you want to display the Featured Image. You could add a Photo module to your layout, then click the plus sign next to the Photo field to display the field connection choices, as shown in this screenshot. You can see that in this case the field connections are limited to images, such as featured images, author pictures, and custom fields that are defined as image data types.

Field connections must match the setting's data type

As you can see from the previous examples, the field connections that are listed depend on the module setting you're adding it to. In the first example, in the Heading module, the Heading field requires text values. In the second example, the Photo field requires an image.

You can see this action if you add a field connection for an image to a row or module setting that requires text. For example, if you click the plus sign next to the Heading field of the Heading module, you'll see Post featured image in the list.

If you chose Post featured image in a Photo module, you'd see the image, but when you select it for the Heading module, a settings window opens and you can choose which type of information about the image to display: URL, Title, Caption, Description, or Alt Text. You can also ignore the Image size field because the image won't display.

Note: You might be wondering why there's no field connection to the header logo that's set in the Beaver Builder Theme Customizer. Currently, there are no field connections to Customizer settings. This is because each theme does customizer settings differently, so the field connections would have to be set up on a per-theme basis. So, for example, if you want to add a logo to a header layout, use a Photo module with a link to an image in your media library.