Developer Tutorials

Overview

Periodically we update our "How To" section with new materials.

Add animation param to the element

WPBakery Page Builder allows you to add an animation parameter type to your custom elements, enabling users to select an animation for the element from the predefined list of animations.

Add iconpicker param to the element

WPBakery Page Builder allows you to add an iconpicker parameter type to your custom elements, enabling users to select an icon from various icon libraries. Below is a step-by-step guide on how to integrate an icon picker with support for multiple icon libraries.

Custom types ready with Toolset

WPBakery Page Builder is fully custom types ready by ensuring compatibility with Toolset. This allows you to build sites based on custom post types. This document will explain to you how to build custom types based solutions by using travel site example.

How to create custom element

One of the strongest sides of WPBakery is its extensibility.

WPBakery beta testing guide: steps & tips

Since 8.2

Add "Design Options" tab with CSS editor to your element

Adding CSS editor to your content element is very easy and it is a two steps process. First, map your attribute in vcmap() function call, then make sure you output it in your content element template file.

Add custom row layouts (presets)

WPBakery Page Builder comes with a set of predefined row layouts (most popular variations), this helps you or other users easily switch between available column layouts within a row. To add more layouts you should modify global array $vcrowlayouts on vcafterinit_base action.

Add Google fonts parameter

It is possible to add Google Fonts parameter to a custom element of WPBakery Page Builder, by following these steps:

Adding custom shortcode to grid builder

Starting from WPBakery Page Builder 4.6.0 it is allowed to add shortcodes to WPBakery Page Builder Grid Builder by appending them to Grid Builder shortcodes list. The list can be modified by filter 'vc_grid_item_shortcodes'.

Adding icons to vc_icon

It is possible to add your own icons to WPBakery Page Builder shortcode vc_icon by following these steps:

Change CSS class names in output

SINCE 3.6

Change default value of param

It is possible to change default value of existing params.

Change shortcode’s HTML output

SINCE 3.6.5

Control default presets in content elements

SINCE 4.8

Create new param type

Sometimes you may need to add new attribute type for content element attributes. The vc*addshortcodeparam()* function is used to register an attribute *type* handler which will form html markup for settings form in WPBakery Page Builder edit element form. It takes three parameters: the attribute type name (String used in vcmap() mapping function in type parameter), the callback function name and the javascript file absolute url.

Disable instructional/help pointers

It is possible to disable instructional/help pointers of WPBakery Page Builder which appears during the first usage of the plugin and after an update.

Examples pages

Periodically we update our "Examples" section with new materials.

How to manage list of Google fonts

WPBakery Page Builder uses a specific array of Google Fonts available to Custom Heading element and element extensions for styling of heading part. It is possible to change the list of Google Fonts by applying filter vcgooglefontsgetfonts_filter – it will return an array of Google Fonts list which can then be modified/rewritten.

Nested shortcodes (container)

This document explains how to create and work with nested elements (container elements that can hold other elements), such as tabs, accordions, and custom container components.

Param position control with vc_add_param

WPBakery Page Builder vcaddparam() function allows controlling position of where added param will be placed. With the weight attribute it is possible to choose either param will be placed at the very bottom of param list or top (0 – place at bottom, 1 – place on top).

Remove "Edit with WPBakery Page Builder" from WordPress admin bar

You can remove "Edit with WPBakery Page Builder" option from your WordPress admin bar by adding following code to your WordPress theme's functions.php file.

Remove content element from grid builder

To remove content elements from Grid Builder it is necessary to add the following function to the functions.php of your WordPress theme.

Remove WooCommerce mapped content elements

WooCommerce content elements "mapped" into WPBakery Page Builder interface using a different technique, we call it "Vendor scripts". As a result different approach should be used in order to remove them from available content elements list.

Save param values in shortcode string

In order to always save param value in shortcode string, it is required to use param key from vcmap – savealways. This param key has boolean type values with "false" set as default and need to be changed.

Set content element icon

WPBakery Page Builder content element's icon is visible in the available content elements list and is shown when the user clicks "Add element" button in the WPBakery Page Builder interface.

Update single param values

After vcmap() function call all mapping data is stored in memory, if you need to modify one of the existing parameters you can use this technique. This is useful if you want to make a simple change to the existing content elements. For example: Add more color options to the color drop down in the "Call to Action" content element.