If you are creating a website using Advanced custom fields and don't know which widget you can use for the specific field, then this tutorial is for you.
Basic Fields
Text
To display text, you can use the ACF Fields widget with ACF Type selected as Text.
You can also return the value of the text field using Tokens.
Use token [acf:text_field]
to print the value stored in the field.
Text Area
To return the value stored in the TextArea field, you can use the ACF Fields widget and select ACF Type "TextArea"
You can also use Dynamic Tags Token to return the value.
In case you are writing text that makes use of tokens, then you can opt to use our Text Editor with Tokens widget.
Number
To return the value stored in the Number field, you can use the ACF Fields widget and select ACF Type "Number". Here you can also enable currency mode & enable decimal place for the same.
You can also use Dynamic Tags Token to return the value.
Range
To return the value stored in the Range field, you can use the ACF Fields widget and select ACF Type as "Text" or "Number" depending on the properties you need.
To return the value stored in the Email field, you can use the ACF Fields widget and select ACF Type as "Email"
Alternatively, you can use the heading widget and in the Link option choose token. In the Token area, use the ACF field token.
In the advanced option, write mailto:
in the before field.
URL
To return the URL stored in your field, you can use the ACF Fields widget and select ACF Type as "URL" or "Text" depending on the properties you need.
Password
In order to show the password field, you can use the ACF Fields widget and select ACF Type as "Text".
Content
Image
To return the image field, you can use the ACF Fields widget and select ACF Type as "Image"
You can also use the Image widget and return the image using the Dynamic Tag token in the "Choose Image" option
File
To return the file URL stored in the file field, you can use the tokens.
In case of return set as an array, Use Token
[acf:file_field:url]
to return the file URLIn case of return set as file URL, Use Token
[acf:file_field]
to return the URLIn case of return set as ID, Use Token
[acf:file_field|wp_get_attachment_url]
to return the URL
Wysiwyg Editor
To return the value stored in the Wysiwyg field, you can use the ACF FIelds widget and choose Wysiwyg Text Content in ACF Type.
oEmbed
To return the oEmbed field, simply use our ACF Fields widget and choose Video oEmbed in ACF Type.
You can also use tokens to return the value.
Gallery
To show Gallery Field, you can use our ACF Gallery or ACF Slider Widget.
Choice
Select
To return the Select field, simply use our ACF Fields widget and choose Select in ACF Type.
To return the label, you can choose the return type as Both(Array) in your ACF select field. Now, use token:
[acf:field_key:value]
to return the value, &
[acf:field_key:value]
to return the label.
Note: To return the label, make sure to specify the choices in the value and label format.
Checkbox
To return the value stored in the Checkbox field, simply use our ACF Fields widget and choose List (Radio or Checkbox) in ACF Type.
To return the label, you can set the return value as Both(Array) in your fieldset and set the List Return Value as a label in the settings tab of this widget.
Radio Button
To return the value stored in the Radio button field, simply use our ACF Fields widget and choose List (Radio or Checkbox) in ACF Type.
To return the label, you can set the return value as Both(Array) in your fieldset and set the List Return Value as a label in the settings tab of this widget.
Button Group
To return the value stored in the Button Group field, you can use the token : [acf:button_group]
To display label and value, set your field return as Both(array) and then you can use the below token:
[acf:button_group:value]
to return the value; &
[acf:button_group:label]
to return the label;
True False
You can use this field for your fields conditions, show/hide the content based on the value of this field, or you can even query the posts based on this meta field.
Example to show the section when the field is set as true:
Navigate to Visibility, enable visibility, and set the display mode to show while enabling the post-trigger. Go to Post Field setting in the Post Tab and set the true false field and map it to equivalent to 1 (1 means true in this case). So, when your field will be true only then the section will show.
Relational
Link
To return the value stored in Link Field, you can use tokens. In the fieldset, if the return value is set as URL, simply use [acf:field_key]
If the return value is set as an array, then use:
[acf:field_key:url]
to return the URL
[acf:field_key:target]
to return the HTML Target Attribute for the link
[post:field_key:title]
to return the Title
Post Object
To show the relational content based on the Post Object field, you can use our ACF Relationship Widget. You can also create a custom elementor template for showing the post objects in a nice layout.
Page Link
With the page link field, you can return the post page URL. To show more objects of the post, it is recommended to use the Post Object field instead. You can use Token to return the page URL.
Relationship
To display the relational posts set in the specific post, you can use ACF Relationship Widget and choose your Relationship Field from the dropdown.
Taxonomy
In this field type, you can save one or more taxonomy terms. You can return the taxonomy terms using this field. You can use tokens to display the taxonomies stored in the field.
User
You can use the user field type to show the object data related to a user. You can use the below tokens if the return format is set to an array.
[acf:user:ID]
to return the user ID[acf:user:user_firstname]
to return the user first name[acf:user:user_lastname]
to return the user last name[acf:user:nickname]
to return the nickname of the user[acf:user:user_nicename]
to return the nice name of the user in the database[acf:user:display_name]
to return the display name of the user[acf:user:user_email]
to return the user email[acf:user:user_url]
to return the user URL[acf:user:user_registered]
to return the user registration date[acf:user:user_description]
to return the user description[acf:user:user_avatar]
to return the user avatar image
In case of multiple users set in the field group, you can use it like below:
[acf:user:0:ID]
to return the user ID of the first item in the array[acf:user:1:ID]
to return the user ID of the second item in the array
JQuery
Google Map
To show the Google Map location set in your Google Map field, you can use our Dynamic Google Maps widget
Date Picker
Date picker field type is very helpful. You can probably use it for the event date.
You can use the below token to show the date in (j F Y) format.
[acf:field_key|strtotime|date_i18n("j F Y")]
Note that:
[post:date]
returns the post published date.
[date]
returns today's date in the format of [date|F j, Y]
Find more tokens related to date here
Date Time Picker
The date-time picker field also allows picking the time apart from the date. You can also use it for our countdown dynamic due date field. You can simply use the token to return the value stored in this field.
Time Picker
The Time picker field allows picking the time. You can probably use it for the store post type to set the store opening and closing time for the single store. You can simply use the token to return the value stored in this field.
Color Picker
You can use the color picker for your options to set global items' color or for many other purposes.
You can use the tokens to set the color stored in the color picker field.
Layout
Message
Sets a message in your backend.
Accordion
Wraps the other fields underneath it, in an accordion layout.
Tab
Wraps the other fields underneath it, in a vertical or horizontal tabbed layout.
Group
It allows to group together a couple of fields to have a better structure.
Repeater
To show the repeater, you can use our ACF Repeater Widget
Flexible Content
To show the flexible content, you can use our ACF Flexible Content Widget
Clone
With the clone field, you can clone the specific field or the entire field group. To show, the values stored in this field, simply use the widgets based on the fields that are contained in the group.