WPBakery Page Builder Plugin Setup for WordPress

WPBakery Page Builder Setup for WordPress

WPBakery Page Builder (formerly Visual Composer) is one of the oldest page builders for WordPress. It is bundled with many premium themes from Themeforest, so it's widely encountered. It works in two modes: Frontend Editor and Backend Editor.

Editing Modes

Backend Editor — classic interface within the standard WordPress editor. Elements are added via the "Add Element" button, displayed as blocks with icons. Compact, works fast, doesn't require full page loading.

Frontend Editor — editing directly on the site page with visual preview. Requires more browser memory, but more visual for clients.

Switching between modes — button in the top panel of the post.

Content Structure

WPBakery builds pages from rows → columns → elements:

[vc_row]
  [vc_column width="1/2"]
    [vc_column_text]Text[/vc_column_text]
  [/vc_column]
  [vc_column width="1/2"]
    [vc_single_image image="123"]
  [/vc_column]
[/vc_row]

Under the hood WPBakery stores content as shortcodes in post_content. This is both an advantage (readable in DB) and a problem when migrating to another builder.

Plugin Settings

In WPBakery → Settings:

• Role Manager — which user roles have access to the editor and which elements
• General Settings — allow Frontend Editor, site content width
• Custom CSS — built-in CSS editor applied globally

Custom Elements

// Register custom element
add_action( 'vc_before_init', function() {
    vc_map( [
        'name'        => 'Icon Box',
        'base'        => 'icon_box',
        'category'    => 'My Elements',
        'params'      => [
            [
                'type'        => 'textfield',
                'heading'     => 'Title',
                'param_name'  => 'title',
            ],
            [
                'type'        => 'iconpicker',
                'heading'     => 'Icon',
                'param_name'  => 'icon',
            ],
            [
                'type'        => 'textarea_html',
                'heading'     => 'Description',
                'param_name'  => 'content',
            ],
        ],
    ] );
} );

// Shortcode for custom element
add_shortcode( 'icon_box', function( $atts, $content ) {
    $atts = shortcode_atts( [ 'title' => '', 'icon' => '' ], $atts );
    return '<div class="icon-box"><i class="' . esc_attr( $atts['icon'] ) . '"></i>'
         . '<h3>' . esc_html( $atts['title'] ) . '</h3>'
         . '<p>' . wp_kses_post( $content ) . '</p></div>';
} );

Extension via Add-ons

The WPBakery ecosystem includes hundreds of third-party add-ons (Ultimate Addons for WPBakery, Essential Grid, Layer Slider, etc.). They are installed as regular plugins and add their elements to the builder panel.

Restricting Element Access

// Hide standard elements, keeping only needed ones
add_filter( 'vc_after_mapping', function() {
    vc_remove_element( 'vc_progress_bar' );
    vc_remove_element( 'vc_pie' );
    // Hide for specific role
    if ( ! current_user_can( 'manage_options' ) ) {
        vc_remove_element( 'vc_raw_html' );
    }
} );

Migrating from WPBakery to Gutenberg or Elementor

WPBakery stores content as shortcodes — when deactivating the plugin, pages fill with unreadable text like [vc_row][vc_column].... For safe migration:

1. Before deactivation use conversion tool (Classic Editor plugin + manual conversion)
2. Or convert shortcodes to HTML via do_shortcode() and save as clean HTML

There is no automatic WPBakery → Gutenberg conversion without loss — only manual rework.

Performance

WPBakery loads CSS (~130 KB) and JS (~200 KB) on frontend regardless of whether widgets are used on the page. For optimization:

// Disable WPBakery frontend assets on pages without shortcodes
add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_singular() || ! has_shortcode( get_post()->post_content, 'vc_row' ) ) {
        wp_dequeue_style( 'js_composer_front' );
        wp_dequeue_script( 'wpb_composer_front_js' );
    }
}, 100 );

Timeline

Setup, custom element creation, development of 5–10 pages — 2–3 business days.