Create Custom Fields in the 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 and create three different types of custom fields and set them as mandatory.
- A field coming from a list with radio buttons,
- A field coming from a list with checkboxes
- A field coming from a date picker.
Preconditions
- Have the 'Administrator' role in your Purple Hub
- Have the 'CPT UI' plugin enabled in your Purple Hub
Read this external article to learn more about the concept of Custom fields.
How-to guide
1. Go to Purple Hub and click on 'Custom Fields' in the left-hand side menu bar.
2. Click 'Add New'.
3. Click 'Add title' and type the name of your field group into the form, e.g. 'Recipe information'.
4. Next to 'Rules' choose 'Post Type' from the first dropdown.
5. From the second dropdown, choose 'is equal to'.
6. From the third dropdown choose the desired post type, that you want to apply the Custom fields to, e.g. your Custom Post Type, in our example 'Recipe'.
7. Scroll back up and click on '+ Add Field'.
8. Next to 'Field Label' enter your desired name for the first type of field. e.g. 'Diet'.
9. Click on 'Field Type', scroll to 'Choice' and click on 'Radio Button'.
10. Scroll to 'Required' and choose 'Yes' with the toggle.
11. Scroll to 'Choices' and enter your desired choices for the radio buttons.
Put the labels for the system on the left side in lower case 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.
12. Click 'Add field'.
13. For the second additional field, type the desired name into the field next to 'Field label' e.g. 'Season'.
14. Scroll down to 'Field Type', below 'Choice' choose 'Checkbox' in the list and click on it.
15. Scroll to 'Required' and choose 'Yes' with the toggle.
16. Scroll to 'Choices' and enter your desired choices for the radio buttons.
Put the labels for the system on the left side in lower case 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.
17. Click 'Add field'.
18. For the second additional field, type the desired name into the field next to 'Field label' e.g. 'Release date'.
19. Go to 'Field Type', scroll in the Dropdown to 'jQuery' and click on 'Date Picker'.
20. Scroll to 'Required' and choose 'Yes' with the toggle.
21. Scroll to 'Display Format' and choose the date format you desire (to have displayed to your readers) by clicking the radio button next to it.
22. Scroll to 'Return Format' and choose the date format you desire (to have displayed to your editors in the system) by clicking the radio button next to it.
23. Click 'Add field'.
24. Scroll back up to the top of the page and click 'Publish'.
25. You will now see the three newly created and published custom fields as a summary.
26. Go to your (Custom) Post type in the left-hand side menu bar and click on it ('My recipes' in our example).
27. You will find the newly created custom fields visible in the template as mandatory fields below the post.
You have now successfully created a new field group, assigned it to a post type and created three different types of custom fields: a field coming from a list with radio buttons, a field coming from a list with checkboxes, and a field coming from a date picker. You have published it and your editors will see these three (mandatory) fields below the assigned post type when editing a single post.