You can set up custom fields for any type of post to collect additional data. These fields will be rendered dynamically in the post editor.
1. Create a Custom Field Setting
- Go to System Settings
- Create a new setting with name:
Custom Fields - [TYPE]
Example: Custom Fields - Blogs
2. Define Field Structure
We support two formats:
2.1 Legacy Format
NAME:LABEL:TYPEExample:
package_price:Package Price:number2.2 JSON Format (Recommended)
This format allows full customization and supports UI options.
[
{
"name": "package_price",
"label": "Package Price",
"type": "number",
"default_value": 100,
"placeholder": "Enter your package price",
"required": false,
"ui": {
"help_text": "Enter price in USD"
}
}
]3. Supported Field Types
Text (default)
Any unknown type will fallback to a normal input field.
{
"name": "title",
"label": "Title",
"type": "text"
}Number
{
"name": "price",
"label": "Price",
"type": "number"
}Textarea
{
"name": "description",
"label": "Description",
"type": "textarea"
}Select
{
"name": "price_category",
"label": "Price Category",
"type": "select",
"values": [
{ "label": "Moderate", "value": "moderate" },
{ "label": "Luxury", "value": "luxury" }
],
"placeholder": "Select category"
}Tags
Rendered using Tagify input.
{
"name": "country_codes",
"label": "Country Codes",
"type": "tags",
"whitelist": ["us", "ca"],
"enforce_whitelist": true
}HTML Editor
Rich text editor (full HTML editing).
{
"name": "content",
"label": "Content",
"type": "html_editor"
}Date
Uses a date picker input.
{
"name": "publish_date",
"label": "Publish Date",
"type": "date",
"placeholder": "Select date"
}4. Common Properties
name– field key (used inpost[data])label– display labeltype– input typedefault_value– default valueplaceholder– input placeholderrequired– make field requiredui.help_text– helper text shown below input
5. How Data is Stored
All custom field values are stored inside:
post[data][FIELD_NAME]Example:
post[data][package_price] = 1006. Notes
- JSON format is recommended for flexibility
- Fields are rendered in a responsive grid (1–3 columns depending on type)
html_editorandtextareause full widthselect,number, anddateuse smaller width