How To Display Custom Fields?

In TheGem you have three options to display custom fields in content.

“Custom Fields” Element

To add custom fields in your content via page builder, proceed as follows:

WPBakery

Elementor

Following settings can be made:

Source

Here you can select, which type of custom fields you would like to display. Choose between TheGem’s custom fields, ACF/Toolset field groups or manual input If “Custom Fields (TheGem)” option is selected, next you need to select the Post Type to get the list of the respective custom fields in the repeater below. As explained above, you can add TheGem’s custom fields per post type in Theme Options.

Skin

Choose between two pre-built design skins for displaying custom fields. This skins can be customized in “Style” group of settings

Layout

Choose between horizontal or vertical layout for displaying custom fields

Next you see the repeater for adding custom fields. By clicking on “Add Item” you can add as many custom fields as you wish.Let’s check the settings for each item in the repeater:

WPBakery

Elementor

Select Custom Field

Here you can select which custom field to display

Field Type

• Inherit means the field type will be inherited from the ACF/Toolset plugin’s settings
• Text: custom field’s value will be displayed as plain text
• Number: custom field’s value will be displayed as number. In case “number” is selected, you can then specify, if you wish to use your WP Locale to automatically apply the respective number format (simply put: to apply the number format of your WordPress language version)

Prefix/Suffix

optionally specify prefix/suffix to display before or after the custom field’s value

Icon

optionally add icon to display

Label

show or hide the custom field’s label

Label Text

add custom label text

Link

add link to the custom field’s value

Dynamic Tags

Dynamic Tags help you to display customized data based on various sources. For example, you can add dynamic data based on the page and site parameters, this includes data such as: Post Title, Post Excerpt, Author Info etc. Additionally, you can add dynamic data based on custom fields values.

WPBakery

Elementor

Check the chapter “Dynamic Tags” to learn more about how to use dynamic tags in TheGem.

Dynamic Text Shortcode

Using the special code snippet [tg_meta key=”FIELD_NAME”] you can insert the values of the custom fields anywhere in your text content. For example, you can add a text description using “Text Block” element and inside this text on any text location you can simply insert [tg_meta key=”FIELD_NAME”] shortcode to dynamically display the custom field value on the front-end.

Check the chapter “Dynamic Text Shortcode” to learn more about how to use insert dynamic text in TheGem’s content elements.