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:
- 1
-
Edit your post/page with page builder
- 2
-
Search for “Custom Fields” element
WPBakery
Elementor
- 3
-
Insert this element in your content
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.