All Collections
Tutorials
ACF Fields: Guide to widgets you can use for Each field
ACF Fields: Guide to widgets you can use for Each field
Updated over a week ago

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.

Email

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 URL

  • In case of return set as file URL, Use Token [acf:file_field] to return the URL

  • In 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.

Did this answer your question?