PHPackages                             wpbakery-custom-param-collection/wpbakery-custom-param-collection - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wpbakery-custom-param-collection/wpbakery-custom-param-collection

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

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

Collection of WPBakery custom params for element edit modal.

1.4(3w ago)169GPL-3.0-or-later

Since May 13Compare

[ Source](https://github.com/OlegApanovich/wpbakery-custom-param-collection)[ Packagist](https://packagist.org/packages/wpbakery-custom-param-collection/wpbakery-custom-param-collection)[ RSS](/packages/wpbakery-custom-param-collection-wpbakery-custom-param-collection/feed)WikiDiscussions Synced 3w ago

READMEChangelog (8)Dependencies (14)Versions (16)Used By (0)

Description
-----------

[](#description)

This is a collection of additional [custom element param types](https://kb.wpbakery.com/docs/developers-how-tos/create-new-param-type) for [WPBakery Page Builder](https://wpbakery.com/) wordpress plugin. By default, WPBakery already has a lot of [pre-defined element param types](https://kb.wpbakery.com/docs/inner-api/vc_map/#vc_map()-paramsArray), 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
--------------

[](#how-to-install)

### 1. As a regular WordPress plugin.

[](#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

[](#2-include-in-wordpress-themeplugin)

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

[](#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
---------------

[](#collection-list)

### 1. Number

[](#1-number)

**type** : custom\_number

**Description:**Regular input with a type number.

**Screnshot:**

[![Number Param](assets/images/github-readme/screen-1.png)](assets/images/github-readme/screen-1.png)

**Param Attributes:**

NameTypeRequredDescriptionparam\_namestringyesParam slug.valuestringnoPredefind value. Can be float like '0.1'.minstringnoMinimum value for input. Can be float like '0.1'.maxstringnoMaximum value for input. Can be float like '0.1'.stepstringnoThe Input step when you click the up/down buttons. Can be float like '0.1'.titlestringnoAdditional 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

[](#2-notice)

**type** : custom\_notice

**Description**The [native wordpress notice](https://developer.wordpress.org/block-editor/how-to-guides/notices/) looks like text output to the element edit window.

**Screnshot:**

[![Notice Param](assets/images/github-readme/screen-2.png)](assets/images/github-readme/screen-2.png)

**Param Attributes:**

NameTypeRequredDescriptionparam\_namestringyesParam slug.noticestringnoNotice text.levelstringnoOn 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

[](#3-switcher)

**type** : custom\_switcher

**Description:**Yes/no type switcher.

**Screnshot:**

[![Notice Param](assets/images/github-readme/screen-3.png)](assets/images/github-readme/screen-3.png)

**Param Attributes:**

NameTypeRequredDescriptionparam\_namestringyesParam slug.optionarrayyesSwitcher optionsvaluestringnoSet 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

[](#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](assets/images/github-readme/screen-4.png)](assets/images/github-readme/screen-4.png)

**Param Attributes:**

NameTypeRequredDescriptionparam\_namestringyesParam slug.valuestringnoPredefind value. Can be float like '0.1'.minstringnoMinimum value for input. Can be float like '0.1'.maxstringnoMaximum value for input. Can be float like '0.1'.stepstringnoThe Input step when you click the up/down buttons. Can be float like '0.1'.titlestringnoAdditional 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

[](#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](assets/images/github-readme/screen-5.png)](assets/images/github-readme/screen-5.png)

**Param Attributes:**

NameTypeRequiredDescriptionparam\_namestringyesParam slug.valuestringyesEven if you don't want a predefined value here, specify at least an empty string.minimal"true" or "false"noDisplay TinyMCE editor with minimal options. Default: `"false"`.scopearraynoDisable 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

[](#6-divider)

**type** : custom\_divider

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

**Screnshot:**

[![Notice Param](assets/images/github-readme/screen-6.png)](assets/images/github-readme/screen-6.png)

**Param Attributes:**

NameTypeRequiredDescriptionparam\_namestringyesParam slug.titlestringnoTitle above separator line.subtitlestringnoSubtitle under separator line.title\_descriptionstringnoAnalog description for a regular parameter. Visible as a tooltip near the title.colorstringnoSeparator 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
-----

[](#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](assets/images/github-readme/group.png)](assets/images/github-readme/group.png)

**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,
            ],
        ]
    ] );
}
```

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance94

Actively maintained with recent releases

Popularity14

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~51 days

Recently: every ~73 days

Total

9

Last Release

27d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/25242713?v=4)[OlegApanovich](/maintainers/OlegApanovich)[@OlegApanovich](https://github.com/OlegApanovich)

###  Code Quality

Static AnalysisPHPStan

Code StylePHP\_CodeSniffer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/wpbakery-custom-param-collection-wpbakery-custom-param-collection/health.svg)

```
[![Health](https://phpackages.com/badges/wpbakery-custom-param-collection-wpbakery-custom-param-collection/health.svg)](https://phpackages.com/packages/wpbakery-custom-param-collection-wpbakery-custom-param-collection)
```

###  Alternatives

[sandersander/composer-link

Adds ability to link local packages for development with composer

98457.9k](/packages/sandersander-composer-link)[carpcai/address-parser

A PHP library covers PHP 5.4 to 7.3, split an address street to street, states, city, zipcode.

1425.5k](/packages/carpcai-address-parser)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)