Skip to content

Field Types

Jump to bottom
Wapiclo edited this page Dec 4, 2025 · 9 revisions

Wapic Fields includes a wide range of field types for handling different data inputs in WordPress.
Each field supports a shared set of attributes as shown below.

Common Field Attributes

All field types support these common attributes:

Attribute Type Description Required
id string Unique field identifier/key Yes
type string Type of field (see list below) Yes
label string Label displayed in the admin interface No
value mixed Default or stored value (for metabox, option, and term meta) No
required boolean Whether the field is required. Default: false No
choices array Options for select, select2, radio, and checkbox fields No
desc string Description or help text displayed below the field No
condition array Conditional logic to show/hide field based on another field No
attributes array Additional HTML attributes for the field No

Initializing Fields

There are two ways to initialize fields in Wapic Fields:

Method 1: Using a Custom Class

If you're building fields within your own class, import the Field class:

use Wapic_Fields\Field;

class CustomField {
    public function __construct() {
        // Use Field::add_control() to define fields
        Field::add_control([
            'id'    => 'my_field',
            'type'  => 'text',
            'label' => 'My Field',
        ]);
    }
}

Method 2: Using the Field Class Directly

You can also register fields without creating a class by calling the Field class directly:

Wapic_Fields\Field::add_control([
    'id'    => 'my_field',
    'type'  => 'text',
    'label' => 'My Field',
]);

Available Field Types

Below are all the field types supported by Wapic Fields with usage examples.

1. Text

Single-line text input field.

Wapic_Fields\Field::add_control([
    'id'    => 'example_text',
    'type'  => 'text',
    'label' => 'Text Field',
    'value' => 'Sample text',
]);

2. Textarea

Multi-line text input field.

Wapic_Fields\Field::add_control([
    'id'    => 'example_textarea',
    'type'  => 'textarea',
    'label' => 'Textarea Field',
    'value' => 'Sample multi-line text',
]);

3. URL

URL input field with built-in validation.

Wapic_Fields\Field::add_control([
    'id'    => 'example_url',
    'type'  => 'url',
    'label' => 'URL Field',
    'value' => 'https://example.com',
]);

4. Email

Email input field with built-in validation.

Wapic_Fields\Field::add_control([
    'id'    => 'example_email',
    'type'  => 'email',
    'label' => 'Email Field',
    'value' => 'email@example.com',
]);

5. Number

Numeric input field.

Wapic_Fields\Field::add_control([
    'id'    => 'example_number',
    'type'  => 'number',
    'label' => 'Number Field',
    'value' => '123',
]);

6. Phone

Phone number input field.

Wapic_Fields\Field::add_control([
    'id'    => 'example_phone',
    'type'  => 'phone',
    'label' => 'Phone Field',
    'value' => '+1234567890',
]);

7. Checkbox

Checkbox field for multiple selections.

Wapic_Fields\Field::add_control([
    'id'      => 'example_checkbox',
    'type'    => 'checkbox',
    'label'   => 'Checkbox Field',
    'options' => [
        'option_1' => 'Option 1',
        'option_2' => 'Option 2',
        'option_3' => 'Option 3',
    ],
    'value'   => ['option_1', 'option_2'], // Array of selected values
]);

8. Radio

Radio button field for single selection.

Wapic_Fields\Field::add_control([
    'id'      => 'example_radio',
    'type'    => 'radio',
    'label'   => 'Radio Field',
    'options' => [
        'option_1' => 'Option 1',
        'option_2' => 'Option 2',
        'option_3' => 'Option 3',
    ],
    'value'   => 'option_1',
]);

9. Toggle

On/off toggle switch.

Wapic_Fields\Field::add_control([
    'id'    => 'example_toggle',
    'type'  => 'toggle',
    'label' => 'Toggle Field',
    'value' => 'yes', // 'yes' or 'no'
]);

10. Select

Standard dropdown select field.

Wapic_Fields\Field::add_control([
    'id'      => 'example_select',
    'type'    => 'select',
    'label'   => 'Select Field',
    'options' => [
        'option_1' => 'Option 1',
        'option_2' => 'Option 2',
        'option_3' => 'Option 3',
    ],
    'value'   => 'option_1',
]);

11. Select2

Enhanced select field with search functionality and multiple selection support.

Wapic_Fields\Field::add_control([
    'id'         => 'example_select2',
    'type'       => 'select2',
    'label'      => 'Select2 Field',
    'options'    => [
        'option_1' => 'Option 1',
        'option_2' => 'Option 2',
        'option_3' => 'Option 3',
    ],
    'value'      => 'option_1,option_2', // Comma-separated for multiple
    'attributes' => [
        'multiple'    => true,
        'placeholder' => 'Select options...',
        'allow_clear' => true,
    ],
]);

12. Image

Single image upload field using WordPress Media Library.

Wapic_Fields\Field::add_control([
    'id'    => 'example_image',
    'type'  => 'image',
    'label' => 'Image Field',
    'value' => 123, // WordPress attachment ID
]);

13. Gallery

Multiple image upload field using WordPress Media Library.

Wapic_Fields\Field::add_control([
    'id'    => 'example_gallery',
    'type'  => 'gallery',
    'label' => 'Gallery Field',
    'value' => '123,124,125', // Comma-separated attachment IDs
]);

14. File

File upload field using WordPress Media Library.

Wapic_Fields\Field::add_control([
    'id'    => 'example_file',
    'type'  => 'file',
    'label' => 'File Field',
    'value' => 'https://example.com/file.pdf', // File URL
]);

15. Color

Color picker field.

Wapic_Fields\Field::add_control([
    'id'    => 'example_color',
    'type'  => 'color',
    'label' => 'Color Field',
    'value' => '#000000',
]);

16. Date

Date picker field.

Wapic_Fields\Field::add_control([
    'id'    => 'example_date',
    'type'  => 'date',
    'label' => 'Date Field',
    'value' => '2025-09-04', // Format: YYYY-MM-DD
]);

17. WP Editor

WordPress rich text editor (TinyMCE).

Wapic_Fields\Field::add_control([
    'id'    => 'example_wp_editor',
    'type'  => 'wp_editor',
    'label' => 'WP Editor Field',
    'value' => '<p>HTML content here</p>',
]);

Next Steps

Clone this wiki locally