Tutorial: Use a WordPress custom field as a field connection

Here's a detailed example of how to set up a standard WordPress custom field and use it in a Theme Builder layout. See the Related Articles for an overview of how to use custom fields for the Advanced Custom Fields plugin, Toolset, and Pods.

Suppose you create a Singular layout template using the default template for that type, where the Featured Image is used as a row background, and the Post title and other post meta information are displayed in that row:

Suppose that in addition, you want authors to add a custom note to every post, which will appear above the Post Title, as shown in the following screenshot, which now includes the note "Report from the field."

It's easy to do this by creating a custom field in WordPress and then using the Custom field connection from your module. Here's how.

  1. Open any Post page for editing.
  2. To display custom fields on the editing page, click Screen Options in the upper right corner and select the Custom fields checkbox.
    This opens the Custom fields panel below the content area.
  3. Click the Enter new link and enter the name of your custom field. 
    In this example, we're using the name top-note.
    Once you add this field, the name will appear on every Post editing screen, but the value is entered separately for each Post.
  4. In the Value box, type in the note that you want above the Post Title for this post.
    In this example, we're using the note Report from the field.
  5. Click Add custom field.
  6. Go to Builder > Theme Layouts, and open the theme layout in Page Builder.
  7. Add the module to the layout that you want to display the custom field.
    In this example, we're using a Heading module.
  8. Click the plus sign next to the field you want to use and choose Post Custom field.
    In this example, we'll put the custom field in the Heading field, as shown in this screenshot.
    If you've created more than one custom field, after you select Post Custom Fields you'll be asked to enter the Key for the field you want.
  9. Save the module and publish the theme layout.
    You should now see the custom field displayed.

You can test your custom field by opening another post that uses that layout template and adding a different value to the top-note field.

Note: After you add a custom field, you'll need to edit your database or use a WordPress plugin to remove it, such as the Delete Custom Fields plugin.