Create A WPBakery Visual Composer Add-On

Create A WPBakery Visual Composer Add-On

If you’ve ever used WPBakery Visual Composer while building a website, which we are sure most of you have. You’ve probably thought at least one time that it would be nice to build your own custom Visual Composer Add-on.

Well, this tutorial will explain how to do just that. Note: This will only work if you have Visual Composer already integrated into your theme.

For this example we will be building a Directory addon to Visual Composer that will make it easy to add a list of businesses/products and their information to your website. However, you can pretty much use our example for a number of useful things. Now, let’s get started!

Don't Want To Touch Any Code?

Have one of our WordPress Experts add the following code snippets for you. Chill out while we do the hard work.

Get Help
Where to add your code

There are a few different ways you can add the code to create your own custom WPBakery Visual Composer add-on. The way we are going to approach it however is by create a custom WordPress plugin so if would like to reuses this add-on for other website builds it will be super easy.

So to get started, let’s open up your websites FTP and under /wp-content/plugins/  let’s create a new folder called wpc-directory.

Create a new folder under /wp-content/plugins/ and call it wpc-directory

The next step, we are going to open the new folder wpc-directory we just created and add two new files.

  1. The first file we will call it wpc-directory.php and this will be our main plugin file.
  2. The second file we are going to create is vc-directory-element.php. This will be the framework for our custom WPBakery Visual Composer add-on.

Now that we have created those two files, let’s open wpc-directory.php and past in the following code:

<?php

/*
Plugin Name: WPC Directory
Plugin URI: https://wpcodeus.com/
Description: An extension for Visual Composer that display an community directory option
Author: WP Codeus
Version: 1.0.0
Author URI: https://wpcodeus.com/
*/

// Before VC Init

add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {

// Require new custom Element

include( plugin_dir_path( __FILE__ ) . 'vc-directory-element.php');

}

// Link directory stylesheet

function community_directory_scripts() {
    wp_enqueue_style( 'community_directory_stylesheet',  plugin_dir_url( __FILE__ ) . 'styling/directory-styling.css' );
}
add_action( 'wp_enqueue_scripts', 'community_directory_scripts' );

Code Explanation
  • Line 12 we added an action to the the vc_before_init VC hook, so are function will be called VC init
  • Line 20 we required the file we just created vc-directory-element.php and to find its absolute path we used iinclude( plugin_dir_path( __FILE__ )

After you have pasted in the code above let’s go ahead and save that, and open our next file called vc-directory-elements.php. Now we can finally start building the WPBakery Visual Compose Add-on!

Initialize your new Element

Now you should have the file vc-directory-element.php open. Go ahead and paste in the code below:

<?php

/*
Element Description: Directory
*/

// Element Class
class vcInfoBox extends WPBakeryShortCode {

    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
        add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
    }

    // Element Mapping
    public function vc_infobox_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        vc_map(
            array(
                'name' => __('Listing', 'text-domain'),
                'base' => 'vc_infobox',
                'class' => 'wpc-text-class',
                'description' => __('Add new listing', 'text-domain'),
                'category' => __('WPC Directory', 'text-domain'),
                'icon' => plugin_dir_path( __FILE__ ) . 'assets/img/note.png',
                'params' => array(

                    array(
                        'type' => 'attach_image',
                        'holder' => 'img',
                        //'class' => 'text-class',
                        'heading' => __( 'Image', 'text-domain' ),
                        'param_name' => 'bgimg',
                        // 'value' => __( 'Default value', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Listing',
                    ),

                    array(
                        'type' => 'textfield',
                        'holder' => 'h3',
                        'class' => 'title-class',
                        'heading' => __( 'Business Name', 'text-domain' ),
                        'param_name' => 'title',
                        'value' => __( '', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Listing',
                    ),

                    array(
                        'type' => 'textarea_html',
                        'holder' => 'div',
                        'class' => 'wpc-text-class',
                        'heading' => __( 'Description', 'text-domain' ),
                        'param_name' => 'content',
                        'value' => __( '', 'text-domain' ),
                        'description' => __( 'To add link highlight text or url and click the chain to apply hyperlink', 'text-domain' ),
                        // 'admin_label' => false,
                        // 'weight' => 0,
                        'group' => 'Listing',
                    ),

                ),
            )
        );

    }

    // Element HTML
    public function vc_infobox_html( $atts, $content ) {

        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'bgimg' => 'bgimg',
                    'title'   => '',
                ),
                $atts
            )
        );

  $img_url = wp_get_attachment_image_src( $bgimg, "large");

        // Fill $html var with data
        $html = '
        <div class="wpc-directory-wrap">

            <img class="wpc-directory-image" src="'. $img_url[0] .'">

            <h2 class="wpc-directory-title">' . $title . '</h2>

            <div class="wpc-directory-text">'. $content .'</div>

        </div>';

        return $html;

    }

} // End Element Class

// Element Class Init
new vcInfoBox();
Customizing Your WPBakery Visual Composer Add-on

As we mentioned above, for this example we are making a directory style WPBakery Visual Composer Add-on. Looking at the code you just pasted you will see starting at line 24 that there is a function called vc_map. This is passing an array of options and params which will structure our new add-on.

Next if you look at line 27 you will see the WPBakery Visual Composer elements name “Listing”.  This is the name of the new add-on that we are adding. You can name this whatever you would like.

On line 31 using the category attribute it is allowing us to create a custom tab for your add-on in the VC list of elements. For this example we named our category WPC Directory, but you can change it to your liking as well. If you don’t add the category attribute, your element will be placed in the “All” tab.

Customizing Your WPBakery Visual Composer element category
VC Field Options

On lines 36 to line 71 you can see that there are 3 different arrays.

The array on line 36 is an array type attach_image. This array will allow us to add an image option to your new element.

The second array on line 48 is an array type textfield. This is what we will be using to add our Business Name option.

And the last array on line 60 is an array type textarea_html. This allows us to have a text area for our listing directory.

You can see on each array that we have the attributes heading. You can change this to have a custom heading for each option. On the third array you will also see the attribute description. Since we didn’t want descriptions on the first two options we did not include it on those. However, you can copy and paste the attribute to the first two options if you would like a description.

If you would like to add a new field type that isn’t in our example, here is a link that has a list of all the Visual Composer vc_map field examples.

Styling Our New Add-on

The last step to creating our custom WPBakery Visual Composer add-on is to do some styling! First let’s go back to our FTP and under our plugin folder wpc-directory let’s create a new folder and call it styling. Next, open the new folder you just created and let’s create a file called directory-styling.css.

Now that we have all the proper folders and files created, let’s go ahead and paste in our CSS that we have created for you:

/* Directory Styling */

.wpc-directory-wrap {
    border: 1px solid #dbdbdb;
    margin-bottom: 31px;
    padding-bottom: 28px;
}
.wpc-directory-image {
  object-fit: cover;
  width: 100%;
  height: 230px;
  margin-bottom: 10px;
}
.wpc-directory-title {
    color: #1e2427;
    font-family: 'Source Pro Sans', sans-serif;
    font-size: 22.5px;
    line-height: 27px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: none;
    margin-bottom: 6px;
    padding: 8px 30px 5px 30px;
}
.wpc-directory-text {
    font-size: 14px;
    line-height: 23px;
    padding: 0px 30px 0px 30px;
}
.wpc-directory-text a {
    color: #cd4335;
    font-weight: 600;
}
.wpc-directory-wrap img[src=""] {
    display: none;
}

And that is it! Once you have saved all your files and activated your new plugin in the WordPress dashboard, you will have created your first WPBakery Visual Composer Add-on. If you did everything correctly you will have a new directory style visual composer element that will look like this:

Summary

Creating a WPBakery Visual Composer add-on can have a lot of perks. For example: Maybe you have some clients that are not the most tech savy people in the world, but they want to add more information later on that will have the same structure. Having an element will all the options in one place is a lot easier than having to use 3 different elements and making sure they don’t mess the styling up.

The nice thing about this is that you can use this example to create anything that you would need! If you do use this example to create something cool, we would love to see what you created by sharing it in the comments below.

We hope you found this blog useful, and as always if you have any questions feel free to reach out to us at any time!

Need Help with your Website?

Our Experts can handle any customization or developement at a reasonable price.

Get a Quote
No Comments

Leave A Comment
Share Your Thoughts

Looking for more?

Here are some other articles that we think you will be interested in!

The time has come and we are eager to announce the long-awaited launch of WP Codeus 1.0! Not only that, but we are also ...