Fields

Common Parameters

Parameter	Description
name	Required. Field name.
type	Required. Field Type. Available Fields
device_settings	Optional. Show settings for each devices.
default	Optional. Default value.
priority	Optional. Field priority.
theme_supports	Optional. This can be used to hide a setting if the theme lacks support for a specific feature (using add_theme_support). More Details
section	Required. Customize section, Any readily available or user defined section. More details
title	Title of field.
description	Description of field.
selector	Optional. CSS Selector, use for selective refresh.
css_format	Optional. Use for style live view.
render_callback	Optional. Function/Class name to render content.
required	Optional. Fields may be linked/required/folded according to a/multiple parent value(s).
transport	Optional. This can be either 'refresh' (default) or 'postMessage'. Only set this to 'postMessage' if you are writing custom Javascript to control the Theme Customizer's live preview.

Available Fields

• Panel
• Section
• Heading
• Text
• Textarea
• Radio
• Checkbox
• Radio Group
• Image Select
• Color Picker
• Icon Picker
• Text Align
• Text Align No Justify
• CSS Ruler
• Slider
• Group
• Repeater
• Typography
• Background
• Custom HTML custom_html

Panel

array(
    'name' => 'customify_panel',
    'type' => 'panel',
    'theme_supports' => '',
    'title' => __('Customify Panel', 'customify'),
)

Section

array(
    'name' => 'customify_section',
    'type' => 'section',
    'panel' => 'customify_panel',
    'theme_supports' => '',
    'title' => __('Customify Section', 'customify'),
    'description' => __('This is section description', 'customify'),
)

Heading

array(
    'name' => 'heading_name',
    'type' => 'heading',
    'section' => 'customize_section',
    'title' => __( 'Heading title', 'customify' ),
)

Text

array(
    'name' => 'text',
    'type' => 'text',
    'transport' => 'postMessage', // or refresh
    'section' => 'customify_section',
    'title' => __('Text Field', 'customify'),
    'description' => __('This is description', 'customify'),
)

TextArea

array(
    'name' => 'text',
    'type' => 'textarea',
    'transport' => 'postMessage', // or refresh
    'section' => 'customify_section',
    'title' => __('TextArea Field', 'customify'),
    'description' => __('This is description', 'customify'),
)

Checkbox

array(
    'name' => 'checkbox',
    'type' => 'checkbox',
    'label' => __('Checkbox', 'customify'),
    'section' => 'customify_section',
    'description' => __('This is description', 'customify'),
    'setting_type' => 'checkbox',
    'checkbox_label' => __('This is checkbox label', 'customify'),
),

Radio

array(
    'name' => 'radio',
    'type' => 'radio',
    'default' => '2',
    'section' => 'customify_section',
    'title' => __('Radio', 'customify'),
    'description' => __('This is description', 'customify'),
    'choices' => array(
        '1' => __('One', 'customify'),
        '2' => __('Two', 'customify'),
        '3' => __('Three', 'customify'),
    )
)

Radio Group

array(
    'name' => 'radio_group',
    'type' => 'radio_group',
    'default' => '2',
    'section' => 'customify_section',
    'title' => __('Radio Group', 'customify'),
    'description' => __('This is description', 'customify'),
    'choices' => array(
        '1' => __('One', 'customify'),
        '2' => __('Two', 'customify'),
        '3' => __('Three', 'customify'),
        '4' => __('4', 'customify'),
        '5' => __('Five', 'customify'),
    )
)

Image Select

array(
    'name' => 'image_select',
    'type' => 'image_select',
    'device_settings' => true,
    'default' => '3',
    'section' => 'customify_section',
    'title' => __('Image Select', 'customify'),
    'description' => __('This is description', 'customify'),
    'choices' => array(
        '1' => array(
            'img' => 'https://cdn4.iconfinder.com/data/icons/unigrid-layout/60/021_layout_wireframe_grid_chat_messages_conversation_forum-128.png',
            //'label' => 'Option_1'
        ),
        '2' => array(
            'img' => 'https://cdn4.iconfinder.com/data/icons/unigrid-layout/60/021_layout_wireframe_grid_posts_list-128.png',
            //'label' => 'Option_2'
        ),
        '3' => array(
            'img' => 'https://cdn4.iconfinder.com/data/icons/unigrid-layout/60/021_layout_wireframe_grid_list_checkboxes-128.png',
            //'label' => 'Option_3'
        ),
        '4' => array(
            'img' => 'https://cdn4.iconfinder.com/data/icons/unigrid-layout/60/021_layout_wireframe_grid_wizard_step_steps-128.png',
            //'label' => 'Option_4'
        ),
    )
)

Color Picker

array(
    'name' => 'color',
    'type' => 'color',
    'default' => '#f5f5f5',
    'transport' => 'postMessage', // or refresh
    'section' => 'customify_section',
    'title' => __('Color', 'customify'),
    'description' => __('This is description', 'customify'),
    'selector' => 'h4',
    'css_format' => 'color: {{value}}'
)

Text Align

array(
    'name' => 'text_align',
    'type' => 'text_align',
    'default' => 'left', // Can be left, right, center, justify
    'transport' => 'postMessage', // or refresh
    'section' => 'customify_section',
    'title' => __('Text Align', 'customify'),
),

Text Align No Justify

array(
    'name' => 'text_align',
    'type' => 'text_align_no_justify',
    'default' => 'left', // Can be left, right, center, justify
    'transport' => 'postMessage', // or refresh
    'section' => 'customify_section',
    'title' => __('Text Align', 'customify'),
),

CSS Ruler

array(
    'name' => 'css_ruler',
    'device_settings' => true,
    'type' => 'css_ruler',
    'default' => null,
    'transport' => 'postMessage', // or refresh
    'section' => 'customify_section',
    'theme_supports' => '',
    'title' => __('CSS Ruler', 'customify'),
    'description' => __('This is description', 'customify'),
    'selector' => 'h4',
    'css_format' => array(
        'top' => 'padding-top: {{value}}',
        'right' => 'padding-right: {{value}}',
        'bottom' => 'padding-bottom: {{value}}',
        'left' => 'padding-left: {{value}}',
    )
)

To disable fields add more key fields_disabled, fields_disabled must be an array with keys, key is the field that you want to disable, value is the placeholder text. Example:

'fields_disabled' => array(
    'left' => '', // Custom text  default: Auto
    'right' => '',
)

Icon Picker

array(
    'name' => 'icon',
    'type' => 'icon',
    'device_settings' => false,
    'default' => '',
    'section' => 'customify_section',
    'title' => __('Icon', 'customify'),
    'description' => __('This is description', 'customify'),
)

Slider

array(
    'name' => 'slider',
    'type' => 'slider',
    'device_settings' => false,
    'default' => 20,
    'min' => -1,
    'max' => 10,
    'step' => .1,
    'section' => 'customify_section',
    //'priority' => 22,
    'theme_supports' => '',
    'title'          => __( 'Slider', 'customify' ),
    'description' => __( 'This is description',  'customify' ),
    'selector' => 'h4',
    'css_format' => 'font-size: {{value}}'
)

Group

array(
    'name' => 'group',
    'type' => 'group',
    'section' => 'customify_section',
    'title' => __('Group', 'customify'),
    'description' => __('This is description', 'customify'),
    'live_title_field' => 'title',
    'default' => array(
        'title' => __('Title 1', 'customify'),
        'content' => __('Content 1', 'customify'),
    ),
    'fields' => array(
        array(
            'name' => 'title',
            'type' => 'text',
            'device_settings' => true,
            'label' => __('Title', 'customify'),
        ),
        array(
            'name' => 'image',
            'type' => 'image',
            'label' => __('Image', 'customify'),
        ),
        array(
            'name' => 'select',
            'type' => 'select',
            'label' => __('Select', 'customify'),
            'description' => __('Select 2 to show text area', 'customify'),
            'choices' => array(
                1 => 1,
                2 => 2,
                3 => 3
            )
        ),
        array(
            'name' => 'content',
            'type' => 'textarea',
            'label' => __('Textarea', 'customify'),
            'required' => array('select', '==', '2')
        ),
    )
)

Repeater

array(
    'name' => 'repeater',
    'type' => 'repeater',
    'section' => 'customify_section',
    'title' => __('Repeater', 'customify'),
    'description' => __('This is description', 'customify'),
    'live_title_field' => 'title',
    'limit' => 4,
    'limit_msg' => __('Just limit 4 item, Ability HTML here', 'customify'),
    'default' => array(
        array(
            'title' => __('Title 1', 'customify'),
            'content' => __('Content 1', 'customify'),
        ),
        array(
            'title' => __('Title 2', 'customify'),
            'content' => __('Content 2', 'customify'),
        )
    ),
    'fields' => array(
        array(
            'name' => 'title',
            'type' => 'text',
            'label' => __('Title', 'customify'),
        ),
        array(
            'name' => 'slider',
            'type' => 'slider',
            'device_settings' => true,
            'label' => __('Slider', 'customify'),
        ),
        array(
            'name' => 'image',
            'type' => 'image',
            'label' => __('Image', 'customify'),
        ),
        array(
            'name' => 'select',
            'type' => 'select',
            'label' => __('Select', 'customify'),
            'description' => __('Select 2 to show text area', 'customify'),
            'choices' => array(
                1 => 1,
                2 => 2,
                3 => 3
            )
        ),
        array(
            'name' => 'content',
            'type' => 'textarea',
            'label' => __('Textarea', 'customify'),
            'required' => array('select', '==', '2')
        ),
    )
)

Typography

array(
    'name' => 'typography',
    'type' => 'group',
    'section' => 'customify_section',
    'title' => __('Typography', 'customify'),
    'description' => __('This is description', 'customify'),
    'field_class' => 'customify-typography-control',
    'selector' => '#page',
    'css_format' => 'typography',
    'default' => array(),
    'fields' => array(

        array(
            'name' => 'font',
            'type' => 'font',
            'label' => __('Font', 'customify'),
        ),

        array(
            'name' => 'text-align',
            'type' => 'font_style',
            'label' => __('Font Style', 'customify'),
        ),

        array(
            'name' => 'font_style',
            'type' => 'text_align',
            'label' => __('Text align', 'customify'),
        ),

        array(
            'name' => 'font_size',
            'type' => 'slider',
            'label' => __('Font Size', 'customify'),
            'device_settings' => true,
        ),

        array(
            'name' => 'line_height',
            'type' => 'slider',
            'label' => __('Line Height', 'customify'),
            'device_settings' => true,
        ),

        array(
            'name' => 'letter_spacing',
            'type' => 'slider',
            'label' => __('Letter Spacing', 'customify'),
            'min' => -10,
            'max' => 10,
        ),

        array(
            'name' => 'color',
            'type' => 'color',
            'label' => __('Color', 'customify'),
        ),

    )
)

NOTE: css_format as typography do not support 'device_settings' => true however you can set device_settings for each field inside.

Background

array(
    'name' => 'background',
    'type' => 'group',
    'section' => 'customify_section',
    'title' => __('Background', 'customify'),
    'description' => __('This is description', 'customify'),
    'live_title_field' => 'title',
    'field_class' => 'customify-background-control',
    'selector' => '#page',
    'css_format' => 'background',
    'device_settings' => true,
    'default' => array(),
    'fields' => array(
        array(
            'name' => 'color',
            'type' => 'color',
            'label' => __('Color', 'customify'),
            'device_settings' => true,
        ),
        array(
            'name' => 'image',
            'type' => 'image',
            'label' => __('Image', 'customify'),
        ),
        array(
            'name' => 'cover',
            'type' => 'checkbox',
            'required' => array('image', 'not_empty', ''),
            'label' => __('Background cover', 'customify'),
            'checkbox_label' => __('Background cover', 'customify'),
        ),
        array(
            'name' => 'position',
            'type' => 'select',
            'label' => __('Background Position', 'customify'),
            'required' => array('image', 'not_empty', ''),
            'choices' => array(
                'default' => __('Position', 'customify'),
                'center' => __('Center', 'customify'),
                'top_left' => __('Top Left', 'customify'),
                'top_right' => __('Top Right', 'customify'),
                'top_center' => __('Top Center', 'customify'),
                'bottom_left' => __('Bottom Left', 'customify'),
                'bottom_center' => __('Bottom Center', 'customify'),
                'bottom_right' => __('Bottom Right', 'customify'),
            ),
        ),

        array(
            'name' => 'repeat',
            'type' => 'select',
            'label' => __('Background Repeat', 'customify'),
            'required' => array(
                array('image', 'not_empty', ''),
                // array('style', '!=', 'cover' ),
            ),
            'choices' => array(
                'default' => __('Repeat', 'customify'),
                'no-repeat' => __('No-repeat', 'customify'),
                'repeat-x' => __('Repeat Horizontal', 'customify'),
                'repeat-y' => __('Repeat Vertical', 'customify'),
            ),
        ),

        array(
            'name' => 'attachment',
            'type' => 'select',
            'label' => __('Background Attachment', 'customify'),
            'required' => array(
                array('image', 'not_empty', ''),
                array('cover', '!=', '1'),
            ),
            'choices' => array(
                'default' => __('Attachment', 'customify'),
                'scroll' => __('Scroll', 'customify'),
                'fixed' => __('Fixed', 'customify')
            ),
        ),

    )
)