Creating fields

Display titles, text fields, drop downs, images, galleries, and date pickers. Validate values to ensure the correct data type is provided before an update is requested.

Field parameters

A full list of field parameters and their type. Each component option lists all parameters it accepts below.

id string

A required internal identifier string. For meta value edit fields, this must match the meta field’s name exactly.

label string

Required text describing the field. Appears above all filters types

type string

The field type. Can be “meta” or “custom” (defaults to “meta”). See the Saving data [LINK] resource for more information.

component string

The component type which controls the UI of the field (defaults to “text”). See the full list of component options below.

validate string

For text fields, validation can optionally be performed. Options are:

• price
• number
• url
• email

Note: price validation is inclusive of international formatting so using commas in place of decimals is allowed.

description string

An optional description for text fields that presents as a tooltip.

value string | array

The stored value in WordPress. Can be a string or array of values depending on your field’s data structure. Displayed when single items are being edited.

render string | array | object

For some fields, the displayed value is different than the stored value. For example, an image’s actual value is the id of the attachment while its render value is an object with image information. Displayed when single items are being edited.

placeholder string

Displayed when no value is present for the field.

options array

For drop downs only. Provides an array of options formatted as:

• value (actually stored value)
• label (viewer facing label)

---

Titles

Section titles can be rendered throughout the edit panel to group different fields. Add the title as it’s own field with an id, label, and a component value of title. Titles are part of the field id list in the sort order resource.

// example with all available parameters
$fields[] = [
	'id' => 'inventory',
	'component' => 'title',
	'label' => 'Inventory',
];

Columns

Fields can be displayed in up to three columns. Create a new field with an id and then pass any number of fields into the columns array. Columns are part of the field id list in the sort order resource, but their child fields are not re-sortable:

$fields[] = [
	'id' => '_columns-example',
	'component' => 'columns',
	'columns' => [
		[ /* field */ ],
		[ /* field */ ],
		[ /* field */ ]
	],
];

---

Field component options

Title

Renders a section title to separate and scan different sections of edit fields:

// example with all available parameters
$fields[] = [
	'id' => 'inventory',
	'component' => 'title',
	'label' => 'Inventory',
];

Text

The default edit field type. Renders an input with editable text.

// example with all available parameters
$fields[] = [
	'id' => '_meta_field',
	'label' => 'Meta field',
	'type' => 'meta',
	'component' => 'text',
	'value' => get_post_meta($post_id, '_meta_field', true),
	'render' => get_post_meta($post_id, '_meta_field', true),
	'placeholder' => 'Enter a value',
];

Dropdown

Renders a standard select dropdown with options and a placeholder value.

// example
$fields[] = [
	'id' => '_meta_field',
	'label' => 'Meta field',
	'type' => 'meta',
	'component' => 'dropdown',
	'value' => get_post_meta($post_id, '_meta_field', true),
	'placeholder' => 'Select a value',
	'options' => [
		[
			'value' => 'option_one',
			'label' => 'Option one',
		], [
			'value' => 'option_two',
			'label' => 'Option two',
		],
		[
			'value' => 'option_three',
			'label' => 'Option three',
		]
	],
];

Image

Renders an image. Editing hooks into the WordPress media gallery and uploader modal.

// example
global $Index;

$image = get_post_thumbnail_id($post_id);

$fields[] = [
	'id' => '_thumbnail_id',
	'label' => 'Featured image',
	'type' => 'meta',
	'component' => 'image',
	'value' => $image,
	'render' => $Index->getImageDetails($image)
];

Gallery

Renders a sortable grid of image. Editing hooks into the WordPress media gallery and uploader modal.

// example
global $Index;

$images = [120, 340, 560];

$fields[] = [
	'id' => '_gallery_images',
	'label' => 'Images',
	'type' => 'meta',
	'component' => 'gallery',
	'value' => $images,
	'render' => array_map(array('Index', 'getImageDetails'), $images)
];

Date

Renders a date picker for a single date.

$date = get_post_meta($post_id, '_event_date', true);

$fields[] = [
	'id' => '_event_date',
	'component' => 'date',
	'type' => 'meta',
	'label' => 'Event date',
	'placeholder' => 'Set event date',
	'value' => $Index->getStoredDate($date),
	'render' => $Index->getReadableDate($date)
];

Datetime

Renders a date and time picker for a single date and time.

$date = get_post_meta($post_id, '_event_start', true);

$fields[] = [
	'id' => '_event_start',
	'component' => 'date',
	'type' => 'meta',
	'label' => 'Event time',
	'placeholder' => 'Set event start time',
	'value' => $Index->getStoredDatetime($date),
	'render' => $Index->getReadableDatetime($date),
];

Resources