Controls

These controls you can use in filers to extend Portfolio options (read DEV: WP filters. in FAQ).

Options available in all controls:

array(
    // Control type. Full list you can find below.
    'type'        => 'text',
    'label'       => false,
    'description' => false,
    'name'        => '',
    'placeholder' => '',
    'readonly'    => false,
    'default'     => 'default value',

    // Use the function to getting value.
    'value_callback' => '',

    // hint.
    'hint'        => false,
    'hint_place'  => 'top',

    // support for WPML.
    'wpml'        => false,

    // condition.
    'condition'   => array(
        /**
         * Array of arrays with data:
         *  'control' - control name.
         *  'operator' - operator (==, !==, >, <, >=, <=).
         *  'value' - condition value.
         */
    ),

    // custom styles.
    'style'       => array(
        array(
            'element'  => '.vp-portfolio__item-overlay',
            'property' => 'background-color',
        ),
    ),

    'class'         => '',
    'wrapper_class' => '',
);

text

array(
    'type'        => 'text',
    'label'       => esc_html__( 'Text field', 'visual-portfolio' ),
    'description' => esc_html__( 'Text field description', 'visual-portfolio' ),
    'name'        => 'text_control_uniq_name',
    'placeholder' => esc_html__( 'Text field placeholder', 'visual-portfolio' ),
    'default'     => 'default value',

    // hint.
    'hint'        => esc_html__( 'Text field hint', 'visual-portfolio' ),
    'hint_place'  => 'left',
);

hidden

array(
    'type'        => 'hidden',
    'name'        => 'hidden_control_uniq_name',
    'default'     => 'default value',
);

url

array(
    'type'        => 'url',
    'label'       => esc_html__( 'URL field', 'visual-portfolio' ),
    'name'        => 'url_control_uniq_name',
    'default'     => 'default value',
);

textarea

array(
    'type'        => 'textarea',
    'label'       => esc_html__( 'Textarea field', 'visual-portfolio' ),
    'name'        => 'textarea_control_uniq_name',
    'default'     => 'default value',
    'cols'        => 30,
    'rows'        => 10,
);

checkbox

array(
    'type'        => 'checkbox',
    'label'       => esc_html__( 'Checkbox field', 'visual-portfolio' ),
    'name'        => 'checkbox_control_uniq_name',
    'default'     => true,
);

toggle

array(
    'type'        => 'toggle',
    'label'       => esc_html__( 'Toggle field', 'visual-portfolio' ),
    'name'        => 'toggle_control_uniq_name',
    'default'     => true,
);

range

array(
    'type'        => 'range',
    'label'       => esc_html__( 'Range field', 'visual-portfolio' ),
    'name'        => 'range_control_uniq_name',
    'min'         => 1,
    'max'         => 15,
    'step'        => 1,
    'default'     => 5,
);

select2

array(
    'type'        => 'select',
    'label'       => esc_html__( 'Select field', 'visual-portfolio' ),
    'name'        => 'select_control_uniq_name',
    'options'     => array(
        'val1' => esc_html__( 'Value 1', 'visual-portfolio' ),
        'val2' => esc_html__( 'Value 2', 'visual-portfolio' ),
    ),
    'default'     => 'val1',
    'searchable'  => false,
    'multiple'    => false,
    'tags'        => false,
);

color

array(
    'type'        => 'color',
    'label'       => esc_html__( 'Color field', 'visual-portfolio' ),
    'name'        => 'color_control_uniq_name',
    'default'     => '#ccc',
    'alpha'       => true,
);

align

array(
    'type'        => 'align',
    'label'       => esc_html__( 'Align field', 'visual-portfolio' ),
    'name'        => 'align_control_uniq_name',
    'default'     => 'center',
    'extended'    => true,
);

All control types

The select2 type is now named select. Every type below accepts the common keys as well: label, description, default, condition, style, wpml, reload_iframe, setup_wizard and group.

Type	Extra keys
text, textarea, url, hidden	none
number	min, max, step
range	min, max, step
unit	A CSS length with a unit picker.
radio, buttons	options
select	options, searchable, multiple, creatable, tags, or options_callback for a list fetched over AJAX.
toggle, checkbox	alongside label
color	alpha, gradient
align	extended for nine positions, otherwise three.
aspect_ratio	none
icons_selector	options, each with icon and title; collapse_rows
tiles_selector	none
elements_selector	locations, elements
gallery	focal_point
sortable	options, each of which can be disabled.
code_editor	mode, min_lines, max_lines, classes_tree, encode
html, notice, pro_note, section_heading	Display only. They store no attribute.
category_navigator, category_toggle_group, category_collapse, category_tabs	Panel structure inside the Skin panel.