How to Create a Component Using WPBakery in WordPress

This blog post provides a step-by-step guide on creating a component using WpBakery in WordPress. It is aimed at WordPress users who want to improve their website's functionality and design by creating custom components.

Introduction

In this article, we will learn how to create a custom component in WordPress using the WpBakery plugin (formerly Visual Composer). WpBakery is a popular plugin that allows you to create complex layouts for your WordPress site using an intuitive visual editor. However, in some cases, it is necessary to create a custom component to meet your site's specific needs.

WpBakery provides an option to create custom components with its tool called "Element API." We will go through a step-by-step process to create a simple component and explain all the available field templates.

Step 1: Install the WpBakery Plugin

Before we begin, you must install the WpBakery plugin on your WordPress site. You can install the plugin in your WordPress administration panel's "Plugins" section. You can proceed to the next step if you already have the plugin installed.

Step 2: Create a PHP File

The next step is to create a PHP file that will define the settings of your custom component. Finally, you can create a new PHP file in your theme directory, for example, "/wp-content/themes/your-theme/."

Step 3: Define the settings of your component

The next step is to define the settings of your custom component. You can start with the following code:

<?php

class vcMyComponent {

    function construct() {
        add_action('init', array($this, 'vc_infobox_mapping'), 999);
        add_shortcode('vc_my_component', array($this, 'vc_infobox_html'));
    }

    public function vc_infobox_mapping() {

        if (!defined('WPB_VC_VERSION')) {
            return;
        }

        vc_map(
            array(
                'name' => __('My component', 'text-domain'),
                'base' => 'my_custom_element',
                'description' => __('Description of my component', 'text-domain'),
                'category' => __('Content', 'text-domain'),
                'icon' => get_template_directory_uri().'/assets/images/icon.png',
                'params' => array(
                    array(
                        'type' => 'textfield',
                        'holder' => 'p',
                        'class' => 'title-class',
                        'heading' => __('Title', 'text-domain'),
                        'param_name' => 'title',
                        'value' => __('', 'text-domain'),
                        'description' => __('Description of my field', 'text-domain'),
                        'admin_label' => false,
                    ),
                    
                    array(
                        'type' => 'colorpicker',
                        'class' => "",
                        'heading' => __("Color Title", "my-text-domain"),
                        'param_name' => 'color_title',
                        'value' => '',
                        'description' => __('Enter description.', 'my-text-domain'),
                        'group' => 'Custom Group',
                    ),
                ),
            )
        );
    }
}

This code creates a custom component called "My Component" and adds it to the "Content" category. It also defines a field parameter called "title," which is a simple text field, and another area, "color_title," which is a color picker that sets the color of the title. When you drag and drop your component into the WpBakery visual editor, this field will be displayed for the user to enter the component title and select its color.

Step 4: Add more input fields

You can add more input fields to your custom component to further customize it. Here are some examples of input fields you can add:

Step 5: Create the HTML for the component

To add the HTML of your custom component to the PHP file of your theme, you need to create a new function that returns the HTML of the component.

Here is an example of how to create the function for the custom component:

public function vc_infobox_html($atts) {

        extract(
            shortcode_atts (
                array(
                    'title' => '',
                    'color_title' => '',
                ),
                $atts
            )
        );
        
        ob_start();

        ?>
            <div class="my-component">
                <h1 class="title" style="color: <?php echo $color_title ?>"><?php echo $title ?></h1>
            </div>
        <?php

        $html = ob_get_contents();
        ob_end_clean();

        return $html;
}

In this example, we created a new function called "vc_infobox_html" that uses the component attributes as parameters. Then, using PHP functions like extract() and shortcode_atts(), we set variables for the component attributes to use them in our HTML code.

Next, we use the defined variables to create the HTML for the component. In the example, we created a component that displays a title that can be customized in terms of color. We use the "my-element" class to wrap the entire component. We use the' <h1>' tag for the title and the '$title' and '$color_title' variables to display the content entered by the user in the editor. Finally, we return the entire HTML within the function.

Please note that these examples are just a few options for creating the HTML for your custom component. You can use HTML and CSS code to make the component according to your site's needs.

Conclusion

This article explored how to create a custom component in WordPress using the WPBakery plugin. We have seen how to use WPBakery to create custom fields for our component, allowing users to customize the component directly in the WordPress visual editor.

Furthermore, we have demonstrated how to create the HTML for our component and how to add this HTML to our theme's PHP file using a custom shortcode.

Creating custom components can be a powerful way to extend the functionality of WordPress and provide users with the ability to create personalized and unique content on their websites. With WPBakery, developing custom components and adding them to your WordPress site is easy.

This article has been helpful to you and provided valuable information for creating custom components in WordPress. If you have any questions or need further assistance, don't hesitate to consult the WPBakery documentation or the WordPress community for additional support.