latest version

Addable Box

Addable box with options.

array(
    'type'  => 'addable-box',
    'value' => array(
        array(
            'option_1' => 'value 1',
            'option_2' => 'value 2',
        ),
        // ...
    ),
    'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
    'label' => __('Label', '{domain}'),
    'desc'  => __('Description', '{domain}'),
    'help'  => __('Help tip', '{domain}'),
    'box-options' => array(
        'option_1' => array( 'type' => 'text' ),
        'option_2' => array( 'type' => 'textarea' ),
    ),
    'template' => 'Hello {{- option_1 }}', // box title
    'box-controls' => array( // buttons next to (x) remove box button
        'control-id' => '<small class="dashicons dashicons-smiley"></small>',
    ),
    'limit' => 0, // limit the number of boxes that can be added
    'add-button-text' => __('Add', '{domain}'),
    'sortable' => true,
)

Custom Events

fw:option-type:addable-box:box:init - Box was initialized. Triggered for each existing box after page load, or when a box was added.

fw:option-type:addable-box:control:click - A custom control was clicked.

Visual Composer Integration

Tip

This is a Bumblebee feature.

When Visual Composer extension is active, you can use ‘addable-box’ option type in VC shortcodes, which then will be converted to VC ‘param_group’ param type.

Please note the following options will not take effect on VC: attr, template, box-controls, control-id, limit, add-button-text, sortable

Example input from options.php:

'my_box'    => array(
        'type'        => 'addable-box',
        'value'       => array(     # preset values
                array(              # each array will create another set of values
                        'option_1' => 'value 1',
                        'option_2' => 'value 2',
                ),
                array(
                        'option_1' => 'another value 1',
                        'option_2' => 'another value 2',
                ),
        ),
        'tab'         => esc_html__( "General", 'ct_theme' ),
        'label'       => esc_html__( 'My label', 'ct_theme' ),
        'desc'        => esc_html__( 'Description', 'ct_theme' ),
        'box-options' => array(     # inner options
                'option_1' => array(
                        'type'  => 'text',
                        'label' => esc_html__("Text option label", 'ct_theme' ),
                ),
                'option_2' => array(
                        'type' => 'select',
                        'label' => esc_html__('Select option label', 'ct_theme' ),
                        'choices' => array(
                                'one'  => esc_html__( 'One', 'ct_theme' ),
                                'two'  => esc_html__( 'Two', 'ct_theme' ),
                        )
                ),
        ),
),

The option will render as follows in admin:

../../../_images/addable-box-edit.png

In view file just use a foreach to go through values:

<?php

foreach( $atts['my_box'] as $number => $value_set ) :
    echo $value_set['option_1'];
    echo $value_set['option_2'];
endforeach;

?>