Visual Composer custom elements – WPBakery

visual composer

On this tutorial we will create a WPBakery Visual Composer custom elements

1. Go to your theme folder and create a folder named ‘vc-elements’

2. Open functions.php of your current active theme and add the following code:

 * Visual Composer custom elements.
function vc_before_init_actions() {
  // Stop if Visual Composer is not enabled.
  if ( ! defined( 'WPB_VC_VERSION' ) ) {

  // Visual Composer custom elements list.
  require_once( get_template_directory() . '/vc-elements/infobox.php' );
add_action( 'init', 'vc_before_init_actions' );

Note: for this custom element sample we will create an infobox with title and textarea field.

3. Create new file ‘infobox.php’ inside ‘vc-elements’ folder

4. We need to extend the WPBakeryShortCode inside infobox.php and paste the following code below:

 * Class to load for this map. 
class VC_Custom_InfoBox extends WPBakeryShortCode {

     * Shortcode display. 
    protected function content( $atts, $content = null ) { 
        // Variables. 
        $display = ''; 
        $attr = array();

                  'title'   => '',
                  'content' => ''
            ), $atts ) 

        // Display html.
        $display .= '<div class="infobox__wrapper">';
            $display .= '<h3 class="infobox__title">' . $title . '</h3>';
            $display .= '<p class="infobox__content">' . $content . '</p>';
        $display .= '</div>';

        return $display;

 * VC Map elements.
vc_map( array(
	'base'     => 'vc_custom_infobox',
	'name'     => esc_html__( 'Info Box', 'text-domain' ),
	'description' => 'Display custom infobox',
	'class'    => '',
	'category' => esc_html__( 'Visual Composer Custom Elements', 'text-domain' ),
	'params'   => array(
			'type'        => 'textfield',
			'heading'     => esc_html__( 'Title', 'text-domain' ),
			'param_name'  => 'title',
			'value'       => ''
			'type'        => 'textarea',
			'heading'     => esc_html__( 'Content', 'text-domain' ),
			'param_name'  => 'content',
			'value'       => ''
) );

Voila! the new custom elements we have created now available as VC elements.

Note: For more reference about vc_map(), go to: VC Map Inner API

Stay in the loop with our web development newsletter - no spam, just juicy updates! Join us now. Join our web development newsletter to stay updated on the latest industry news, trends, and tips. No spam, just juicy updates delivered straight to your inbox. Don't miss out - sign up now!

We’ve tried our best to explain everything thoroughly, even though there’s so much information out there. If you found our writing helpful, we’d really appreciate it if you could buy us a coffee as a token of support.

Also, if you’re interested in learning more about WordPress, Javascript, HTML, CSS, and programming in general, you can subscribe to our MailChimp for some extra insights.


This site uses Akismet to reduce spam. Learn how your comment data is processed.