---
title: Create Custom Fields in Purple Hub
slug: editorial/create-custom-fields-in-purple-hub
description: In this article, you will learn how to create custom fields in the Purple Hub. You will create a new field group, assign it to a post type, create a custom field and then set it as mandatory.
docTags: 
createdAt: 2022-10-11T13:27:26.000Z
---

Purple Hub

***

## Summary

In this article, you will learn how to create custom fields in the Purple Hub. You will create a new field group, assign it to a post type, create a custom field and then set it as mandatory.

In our example, we will create a custom field for recipes, where the author of a post can select whether a recipe is vegan, vegetarian, or contains fish/meat. Here is what the result will look like:

::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/u9xjruSraoxyNI6VIavKB_screenshot-2023-08-11-at-122238.png" size="80" width="1195" height="1287" position="center" caption="Custom fields below an article" alt="Custom fields below an article" darkWidth="1195" darkHeight="1287" showCaption="true"}

***

## Preconditions

- Have the 'Administrator' role in your Purple Hub. Learn more: [Purple Hub: Overview of roles & rights](docId\:DjJ5YjJACDPlm9QT0qlFk)
- Have the 'CPT UI' plugin enabled in your Purple Hub
- Have the 'ACF' plugin enabled in your Purple Hub

Read this external article from WordPress to [learn more about the concept of Custom fields](https://wordpress.org/support/article/custom-fields/).

Read this external documentation to learn more about the abilities of the integrated Plugin '[Advanced Custom Fields (ACF) Pro](https://www.advancedcustomfields.com/resources/)'.

***

## How-to guide

1\. Go to Purple Hub

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/9b72945d-48a2-4a88-bb71-693f7e08dca7/a3a27e6a-52d1-4d12-8fc9-aaede021aeb1.png?crop=focalpoint&fit=crop&fp-x=0.1455&fp-y=0.1169&fp-z=1.7147&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=8&mark-y=117&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01ODMmaD04NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="798" position="center" alt="Go to Purple Hub" darkWidth="1200" darkHeight="798" showCaption="false"}

2\. Click on 'ACF'

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/654bb079-f864-4224-93ed-c6ae1f6a86e1/f41157bd-0ad9-42e3-9aa8-38f314a91539.png?crop=focalpoint&fit=crop&fp-x=0.1455&fp-y=0.7500&fp-z=1.7147&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=8&mark-y=413&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01ODMmaD04NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="798" position="center" alt="Click on 'ACF'" darkWidth="1200" darkHeight="798" showCaption="false"}

3\. Click on 'Field Groups'

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/ebfeec6d-d004-45f6-bddc-b4e0e1f34141/e7f4e8ba-b7fe-4328-8622-e992f35a4f47.png?crop=focalpoint&fit=crop&fp-x=0.1431&fp-y=0.7944&fp-z=1.7293&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=8&mark-y=477&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NzcmaD03MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="798" position="center" alt="Click on 'Field Groups'" darkWidth="1200" darkHeight="798" showCaption="false"}

4\. Click on 'Add New'

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/6d1f9f3a-9687-4355-b483-672a8a62cefb/09a79ccb-c8ee-4fcd-9fdc-64546ca23372.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=276&mark-y=145&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xODUmaD02NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="228" position="center" alt="Click on 'Add New'" darkWidth="1200" darkHeight="228" showCaption="false"}

5\. Next to 'Add New Field Group' type the desired name for your field group into the form, e.g. 'Recipe information'.

It is not allowed that the same ACF field name is used in more than one field group, a warning will be displayed.

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/606de07d-26fc-46e4-addd-3d0dbd74372e/ec424996-c07f-4beb-bfaa-d36685fb4463.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=246&mark-y=137&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz01NTMmaD04MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="235" position="center" alt="Next to 'Add New Field Group' type the desired name for your field group into the form, e.g. 'Recipe information'." darkWidth="1200" darkHeight="235" showCaption="false"}

6\. Click on 'Add Field'

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/28a5ced7-3e30-4369-91c5-752ab33e6061/aa4a9ba2-592d-4df1-90ed-37c0b2de0e8b.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=803&mark-y=119&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xNzMmaD0xMDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" size="80" width="1200" height="234" position="center" alt="Click on 'Add Field'" darkWidth="1200" darkHeight="234" showCaption="false"}

7\. Below 'Field Type' choose the desired UI for your custom field from the dropdown, e.g. Radio Buttons

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/9d348c9f-7f9f-4581-9a56-662b0097bc62/228168f6-8b61-490a-be05-58413531bc7e.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8" size="80" width="1200" height="408" position="center" alt="Below 'Field Type' choose the desired UI for your custom field from the dropdown, e.g. Radio Buttons" darkWidth="1200" darkHeight="408" showCaption="false"}

8\. Below 'Field Label' insert the Desired Name of the field that will be displayed to the author creating your article. E.g. Diet

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/180fc986-d324-42a7-8ae6-490f22ce61e7/c4689a96-f81a-44f7-aa9d-c817d789a5cc.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=79&mark-y=74&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xMTExJmg9ODgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" size="80" width="1200" height="226" position="center" alt="Below 'Field Label' insert the Desired Name of the field that will be displayed to the author creating your article. E.g. Diet" darkWidth="1200" darkHeight="226" showCaption="false"}

9\. Below 'Choices' enter your desired choices for the radio buttons.

Put the labels for the system on the left side in lowercase letters and separate the line with an empty space + ':' + another empty space and put on the right side the labels that will be displayed on your post to the readers. For each label, use a new line, so that it looks like in the screenshot.

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/67f98af7-c951-4a03-bd49-4c71c97924ef/d868fab0-60f2-4d51-a06b-ea7859d531e3.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=111&mark-y=199&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xMDgyJmg9MTU3JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" size="80" width="1200" height="511" position="center" alt="Below 'Choices' enter your desired choices for the radio buttons" darkWidth="1200" darkHeight="511" showCaption="false"}

10\. Go back up to the top of the tab and click on 'Validation'

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/9e12fb34-7363-4b38-ac7e-548df93683cb/fe5e3a45-df05-4541-af94-26fd92a56469.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=241&mark-y=101&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xMTUmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="399" position="center" alt="o back up to the top of the tab and click on 'Validation'" darkWidth="1200" darkHeight="399" showCaption="false"}

11\. Next to 'Required' move the toggle from the left to the right side.

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/9d79c2ca-d18f-45ae-be32-0cf9d65a38a1/24f1f113-c5a7-4c65-a05c-490a549f4c5a.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=122&mark-y=234&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz04NiZoPTcyJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" size="80" width="1200" height="325" position="center" alt="Next to 'Required' move the toggle from the left to the right side." darkWidth="1200" darkHeight="325" showCaption="false"}

12\. Go to 'Settings' -> 'Location Rules' -> 'Show this field if' select 'Post Type' from the dropdown

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/150e627a-23f1-426c-b01a-dcb688fa8658/3657e9fd-b682-464e-96fc-968691b9d0c5.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=36&mark-y=344&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz00NzQmaD05MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="594" position="center" alt="Go to 'Settings' -> 'Location Rules' -> 'Show this field if' select 'Post Type' from the dropdown" darkWidth="1200" darkHeight="594" showCaption="false"}

13\. In the following field, select 'is equal to' from the dropdown

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/0f30691f-befd-45c7-bb69-8eca85b5d57b/aca20b4c-f68f-4e29-b5d3-5f45c7f86723.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=511&mark-y=350&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0zMTcmaD05MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="605" position="center" alt="In the following field, select 'is equal to' from the dropdown" darkWidth="1200" darkHeight="605" showCaption="false"}

14\. In the following field, select 'Article' from the dropdown

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/02eb098f-e343-497b-ae7c-a003db057023/080fdc2b-9b6a-43f0-a89f-b9746a4cea5c.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=830&mark-y=342&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0zNjMmaD05NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="600" position="center" alt="In the following field, select 'Article' from the dropdown" darkWidth="1200" darkHeight="600" showCaption="false"}

15\. Click on 'Save Changes'

::Image[]{src="https://images.tango.us/workflows/fd92aa4e-e8f8-4cc3-a8ff-ae7e8181bae7/steps/d8861151-49ee-492a-80ea-aec15f93fed1/a18bf3d0-bb62-4606-8e73-86cad44d799a.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=969&mark-y=68&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xODMmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="198" position="center" alt="Click on 'Save Changes'" darkWidth="1200" darkHeight="198" showCaption="false"}

:::hint{type="success"}
You have now successfully created a new field group, assigned it to a post type and created a custom field coming from a list with radio buttons. You have saved it and your editors will see this (mandatory) field below the article in the UI when editing it.
:::

## Assigning fields to individual blocks

In addition to attaching a field group to a post type, you can also assign it to a specific block type within the article editor. To do this, select **"Block (WordPress)"** in the Location Rules instead of "Post Type", and choose the block type from the dropdown (for example `core/image` or `core/paragraph`). The dropdown lists all available block types.

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/3aolw9c5zALs0TC1Gixft_image.png)

Fields assigned this way appear in the right-hand settings panel of the article editor whenever an editor selects a block of that type — rather than below the article. Each block instance stores its values independently, so two image blocks in the same article can have different values for the same field. The values are included in the published catalog output like any other custom field.

## Referencing a Curator collection

The field type **"Curator Collection"** (in the **Relational** group of the **Field Type** dropdown) shows a dropdown of all collections that exist in the Purple Curator of this Purple Hub, so an editor picks a collection by name instead of typing its ID. The field has no **Choices** setting — the collections of your Purple Hub are the choices, and a collection that is created, renamed or deleted in the Purple Curator shows up in the dropdown right away. Learn more: [Curator: Create a collection](docId\:pNzE8Iihbn73xZzPhWrR7).

The field has two settings of its own, both in the **General** tab:

- **Return Format** — whether the field is published as the collection ID and name, or as the collection ID only.
- **Select Multiple** — whether more than one collection can be selected.

With the default return format, the field is published as an object with the keys `id` and `name`, e.g. `{"id": "col_1a2b3c", "name": "Top Articles"}`; with **Select Multiple** enabled, as a list of such objects. If the selected collection is deleted in the Purple Curator afterwards, the field keeps publishing its ID and the editor sees it marked as deleted, until another collection is selected.

Combined with a custom block, this is how a curated page is built without any developer effort: give a custom block a field group with a **Curator Collection** field, then add one such block per collection to a post and reorder the blocks to reorder the collections on the page. Learn more: [Create a custom block in Purple Hub](docId\:zCab3RO5_hrB6bKD8pFNc).

## Format-specific configuration

### Date Pickers / Date- and Timepickers

For these types of ACFs, it is possible to configure the format they are published with by setting the return format. Usually, the date/time is published in the STRING format, however if you want to publish this in the TIMESTAMP format, you need to enter "U" as the return format.