wpbakery-custom-param-collection/wpbakery-custom-param-collection

Collection of WPBakery custom params for element edit modal.

Maintainers

Package info

github.com/OlegApanovich/wpbakery-custom-param-collection

Type:wordpress-plugin

pkg:composer/wpbakery-custom-param-collection/wpbakery-custom-param-collection

Statistics

Installs: 6

Dependents: 0

Suggesters: 0

Stars: 1

Open Issues: 4

Security

Advisories: 0

Aikido package health analysis

1.3.3 2026-05-16 09:53 UTC

Requires (Dev)

GPL-3.0-or-later 5193425ee0372e702f0381bd5c99e14d776c70bc

This package is auto-updated.

Last update: 2026-05-16 10:05:06 UTC

README

This is a collection of additional custom element param types for WPBakery Page Builder wordpress plugin. By default, WPBakery already has a lot of pre-defined element param types, but if you need even more customization with your WPBakery editor custom elements, this is a great collection of additional element params for it.

How To Install

1. As a regular WordPress plugin.

Clone this repo to your wp-content/plugins folder of your wordpress project.

git clone https://github.com/OlegApanovich/wpbakery-custom-param-collection.git

Then go to wordpress dashboard plugins section, and activate the newly installed "WPBakery Custom Param Collection" plugin there. That's it. Now you can specify any custom parameters from the list below in your custom WPBakery element, and they will appear in your element edit popup.

Alternatively, if you have WP-CLI set up, you can install and activate the plugin using a terminal command.

wp plugin install https://github.com/OlegApanovich/wpbakery-custom-param-collection/archive/refs/heads/main.zip --activate --force

2. Include in WordPress theme/plugin

Clone this repo to your theme/plugin folder.

git clone https://github.com/OlegApanovich/wpbakery-custom-param-collection.git

Then, if you include to the theme, add this code to your functions.php file, or if you use a plugin, add it to the main plugin file.

add_action( 'admin_init', function() {
	include __DIR__ .  '/wpbakery-custom-param-collection/wpbakery-custom-param-collection.php';
} );

Please note that if you include it in your theme/plugin, then disable wpbakery-custom-param-collection plugin, otherwise you will get a fatal error.

3. As a composer dependency

Execute this command.

  composer require wpbakery-custom-param-collection/wpbakery-custom-param-collection:"*"

Then, if you include to the theme, add this code to your functions.php file, or if you use a plugin, add it to the main plugin file.

add_action( 'admin_init', function() {
	if ( class_exists( \Wpbackery_Custom_Param_Collection::class ) ) {
		\Wpbackery_Custom_Param_Collection::boot();
	}
} );

Please note that if you include it in your theme/plugin, then disable wpbakery-custom-param-collection plugin, otherwise you will get a fatal error.

Collection List

1. Number

type : custom_number

Description: Regular input with a type number.

Screnshot:

Number Param

Param Attributes:

Name Type Requred Description
param_name string yes Param slug.
value string no Predefind value. Can be float like '0.1'.
min string no Minimum value for input. Can be float like '0.1'.
max string no Maximum value for input. Can be float like '0.1'.
step string no The Input step when you click the up/down buttons. Can be float like '0.1'.
title string no Additional title in the end of input

Exemple:

add_action( 'vc_before_init', 'integrate_custom_param' );
function integrate_custom_param() {
    vc_map( [
        "name" => __( "Custom Element", "my-text-domain" ),
        "base" => "bartag",
        "category" => __( "Content", "my-text-domain"),
        "params" => [
            [
                'type'        => 'custom_number',
                'value'       => '2.1',
                'min'         => '0.1',
                'max'         => '5.5',
                'step'        => '0.1',
                'heading'     => esc_html__( 'Border Width', 'my-text-domain' ),
                'param_name'  => 'marker_border_width',
                'title'       => esc_html__( 'px', 'my-text-domain' ),
                'description' => esc_html__( 'Set custom border width in px from.', 'my-text-domain' ),
            ]
        ]
    ] );
}

2. Notice

type : custom_notice

Description The native wordpress notice looks like text output to the element edit window.

Screnshot:

Notice Param

Param Attributes:

Name Type Requred Description
param_name string yes Param slug.
notice string no Notice text.
level string no On a level depends the color of the notice UI. There are 4 value levels available (info, warning, error, success). If the level is not specified, the notice will be grey.

Exemple:

add_action( 'vc_before_init', 'integrate_custom_param' );
function integrate_custom_param() {
    vc_map( [
        "name" => __( "Custom Element", "my-text-domain" ),
        "base" => "bartag",
        "category" => __( "Content", "my-text-domain"),
        "params" => [
            [
                'type'        => 'custom_notice',
                'param_name'  => 'custom_notice_info',
                'level'       => 'info',
                'notice'      => __('Here is info notice.', 'my-text-domain'),
            ],
            [
                'type'        => 'custom_notice',
                'param_name'  => 'custom_notice_warning',
                'level'       => 'warning',
                'notice'      => __('Here is warning notice.', 'my-text-domain'),
            ],
            [
                'type'        => 'custom_notice',
                'param_name'  => 'custom_notice_error',
                'level'       => 'error',
                'notice'      => __('Here is error notice.', 'my-text-domain'),
            ],
            [
                'type'        => 'custom_notice',
                'param_name'  => 'custom_notice_success',
                'level'       => 'success',
                'notice'      => __('Here is success notice.', 'my-text-domain'),
            ],
            [
                'type'        => 'custom_notice',
                'param_name'  => 'custom_notice_empty',
                'notice'      => __('Here is empty level notice.', 'my-text-domain'),
            ],
        ]
    ] );
}

3. Switcher

type : custom_switcher

Description: Yes/no type switcher.

Screnshot:

Notice Param

Param Attributes:

Name Type Requred Description
param_name string yes Param slug.
option array yes Switcher options
value string no Set here the value the same as the options key if you wanna switch on by default.

Exemple:

add_action( 'vc_before_init', 'integrate_custom_param' );
function integrate_custom_param() {
    vc_map( [
        "name" => __( 'Custom Element', 'my-text-domain' ),
        'base' => 'bartag',
        'category' => __( 'Content', 'my-text-domain'),
        'params' => [
            [
                'type'        => 'custom_switcher',
                'param_name'  => 'custom_switcher_example',
                'options'     => [
                    'open_value' => [
                        'label' => '',
                        'on'    => __( 'Yes', 'my-text-domain' ),
                        'off'   => __( 'No', 'my-text-domain' ),
                    ],
                ],
                'value' => 'open_value',
            ],
        ]
    ] );
}

4. Number Slider

type : custom_number_slider

Description: Regular input with a type number and a slider that helps regulate the input value.

Screnshot:

Notice Param

Param Attributes:

Name Type Requred Description
param_name string yes Param slug.
value string no Predefind value. Can be float like '0.1'.
min string no Minimum value for input. Can be float like '0.1'.
max string no Maximum value for input. Can be float like '0.1'.
step string no The Input step when you click the up/down buttons. Can be float like '0.1'.
title string no Additional title in the end of input

Exemple:

add_action( 'vc_before_init', 'integrate_custom_param' );
function integrate_custom_param() {
    vc_map( [
        "name" => __( 'Custom Element', 'my-text-domain' ),
        'base' => 'bartag',
        'category' => __( 'Content', 'my-text-domain'),
        'params' => [
            [
                'type'        => 'custom_number_slider',
                'param_name'  => 'custom_number_slider_example',
                'heading' => 'Here some title',
                'title' => 'px',
                'min' => 11,
                'max' => 100,
                'step' => 1,
            ],
        ]
    ] );
}

5. WYSIWYG TinyMCE

type : custom_wysiwyg

Description: By default, WPBakery supports only one WYSIWYG TinyMCE parameter type — textarea_html — per element. With this custom parameter, you can add as many WYSIWYG TinyMCE parameters to a single element as you want.

Screnshot:

Notice Param

Param Attributes:

Name Type Required Description
param_name string yes Param slug.
value string yes Even if you don't want a predefined value here, specify at least an empty string.
minimal "true" or "false" no Display TinyMCE editor with minimal options. Default: "false".
scope array no Disable or override TinyMCE features. Default: [ 'use_tabs' => 'true', 'use_menubar' => 'true', 'use_media' => 'true', 'use_link' => 'true', 'use_lists' => 'true', 'use_blockquote' => 'true', 'use_textcolor' => 'true', 'use_background' => 'true', 'use_rootblock' => 'p' ].

Exemple:

add_action( 'vc_before_init', 'integrate_custom_param' );
function integrate_custom_param() {
	vc_map( [
		"name" => __( 'Custom Element', 'my-text-domain' ),
		'base' => 'bartag',
		'category' => __( 'Content', 'my-text-domain'),
		'params' => [
 			[
				'type'       => 'custom_wysiwyg',
				'param_name' => 'custom_wysiwyg_example',
				'value'      => '',
				'scope'      => [
					'use_menubar'    => 'false',
					'use_media'      => 'false',
				]
			],
        ]
    ] );
}

6. Divider

type : custom_divider

Description: Divider help group param visually, divide them with line separator with title.

Screnshot:

Notice Param

Param Attributes:

Name Type Required Description
param_name string yes Param slug.
title string no Title above separator line.
subtitle string no Subtitle under separator line.
title_description string no Analog description for a regular parameter. Visible as a tooltip near the title.
color string no Separator line color.

Exemple:

add_action( 'vc_before_init', 'your_name_integrate' );
function your_name_integrate() {
    vc_map( [
        "name" => __( 'Custom Element', 'my-text-domain' ),
        'base' => 'bartag',
        'category' => __( 'Content', 'my-text-domain'),
        'params' => [
            [
                'type'              => 'custom_divider',
                'param_name'        => 'custom_divider_example',
                'title'             => __( 'Title Example', 'my-text-domain' ),
                'title_description' => __( 'Group Description', 'my-text-domain' ),
                'subtitle'          => __( 'Subtitle Example', 'my-text-domain' ),
                'color'             => '#4873c9',
            ],
        ]
    ] );
}

Bonus

Additionally to custom parameter collection, we provide functionality to group parameters together. In the edit element popup, this will be visible as a border on the right side of the parameter. To enable this, you need to provide an additional parameter attribute called 'wcp_group' with the value true.

Screnshot:

Notice Param

Exemple:

add_action( 'vc_before_init', 'integrate_custom_param' );
function integrate_custom_param() {
    vc_map( [
        "name" => __( 'Custom Element', 'my-text-domain' ),
        'base' => 'bartag',
        'category' => __( 'Content', 'my-text-domain'),
        'params' => [
            [
                'type'        => 'custom_number_slider',
                'param_name'  => 'custom_number_slider_example',
                'heading' => 'Here some title',
				'wcp_group' => true,
                'wcp_group_color' => '#006400',
                'title' => 'px',
                'min' => 11,
                'max' => 100,
                'step' => 1,
            ],
            [
                'type'        => 'custom_number_slider',
                'param_name'  => 'custom_number_slider_example_2',
				'wcp_group' => true,
                'wcp_group_color' => '#006400',
                'heading' => 'Here some title',
                'title' => 'px',
                'min' => 11,
                'max' => 100,
                'step' => 1,
            ],

            [
                'type'        => 'custom_number_slider',
                'param_name'  => 'custom_number_slider_example3',
                'heading' => 'Here some title',
                'wcp_group' => true,
                'wcp_group_margin_top' => '20',
                'title' => 'px',
                'min' => 11,
                'max' => 100,
                'step' => 1,
            ],
            [
                'type'        => 'custom_number_slider',
                'param_name'  => 'custom_number_slider_example_4',
                'wcp_group' => true,
                'heading' => 'Here some title',
                'title' => 'px',
                'min' => 11,
                'max' => 100,
                'step' => 1,
            ],
        ]
    ] );
}