add custom element to visual composer create theme in wordpress

posted in: Blog | 0

1. Where to include your code

As I wrote in other similar tutorials, the code position is a personal choice. Most tutorials on the net recommend to place any function in the functions.php file in the theme folder. I believe instead that it’s better to create a separate file for the Visual Composer setup in which to place all features.
In this tutorial I’ll share my way to include an element on Visual Composer. I think it’s a really clean way.So you have to create a folder in your theme’s root folder. I decided to create a vc-elements folder in my theme’s root.
Inside vc-elements folder you can create a php file that will contain your new element. I created for example my-first-custom-element.php

The file you just created is still not in WP so we’re going to require it.
If you followed the related tutorial that I reported on the heading you’ll know how to add actions to the hook vc_before_init, but let me show you the code once again.

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
 
 //.. Code from other Tutorials ..//
 
 // Require new custom Element
 require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); 
 
}

2. Initialize your new Element

Before to show you the element code I have to say that there are many ways to build it, I will show you my way. I commonly create a php Class to extend the WPBakeryShortCode Class so I can include all the code in the same place and it allows to do a clean work.
My Class consists of 3 parts:

  1. Shortcode Init
  2. Shortcode Map (parameters)
  3. Shortcode HTML

But now it’s time to paste the code for the Class structure:

/*
Element Description: VC Info Box
*/
 
// 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() {
 
 //.. the Code is in the next steps ..// 
 
 } 
 
 
 // Element HTML
 public function vc_infobox_html( $atts ) {
 
 //.. the Code is in the next steps ..//
 
 } 
 
} // End Element Class
 
// Element Class Init
new vcInfoBox();

3. Mapping the Element

It’s time to use the famous vc_map() function, that allows to add new elements inside Visual Composer and to assign them custom params/attributes.

So we can edit our vc_infobox_mapping() function:

// 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' => __('VC Infobox', 'text-domain'),
 'base' => 'vc_infobox',
 'description' => __('Another simple VC box', 'text-domain'), 
 'category' => __('My Custom Elements', 'text-domain'), 
 'icon' => get_template_directory_uri().'/assets/img/vc-icon.png', 
 'params' => array( 
 
 array(
 'type' => 'textfield',
 'holder' => 'h3',
 'class' => 'title-class',
 'heading' => __( 'Title', 'text-domain' ),
 'param_name' => 'title',
 'value' => __( 'Default value', 'text-domain' ),
 'description' => __( 'Box Title', 'text-domain' ),
 'admin_label' => false,
 'weight' => 0,
 'group' => 'Custom Group',
 ), 
 
 array(
 'type' => 'textarea',
 'holder' => 'div',
 'class' => 'text-class',
 'heading' => __( 'Text', 'text-domain' ),
 'param_name' => 'text',
 'value' => __( 'Default value', 'text-domain' ),
 'description' => __( 'Box Text', 'text-domain' ),
 'admin_label' => false,
 'weight' => 0,
 'group' => 'Custom Group',
 ) 
 
 )
 )
 ); 
 
}

4. Element HTML

We are finally ready to work on the frontend layout, so let’s edit our vc_infobox_html() function:

// Element HTML
public function vc_infobox_html( $atts ) {
 
 // Params extraction
 extract(
 shortcode_atts(
 array(
 'title' => '',
 'text' => '',
 ), 
 $atts
 )
 );
 
 // Fill $html var with data
 $html = '
 <div class="vc-infobox-wrap">
 
 <h2 class="vc-infobox-title">' . $title . '</h2>
 
 <div class="vc-infobox-text">' . $text . '</div>
 
 </div>'; 
 
 return $html;
 
}

5. Result and Complete Code

This is our backend result:

And this is our frontend result:

If you need the complete code paste in your function.php file this function:
// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
 
 //.. Code from other Tutorials ..//
 
 // Require new custom Element
 require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); 
 
}
And paste in your my-first-custom-element.php file this class:
/*
Element Description: VC Info Box
*/
 
// 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' => __('VC Infobox', 'text-domain'),
 'base' => 'vc_infobox',
 'description' => __('Another simple VC box', 'text-domain'), 
 'category' => __('My Custom Elements', 'text-domain'), 
 'icon' => get_template_directory_uri().'/assets/img/vc-icon.png', 
 'params' => array( 
 
 array(
 'type' => 'textfield',
 'holder' => 'h3',
 'class' => 'title-class',
 'heading' => __( 'Title', 'text-domain' ),
 'param_name' => 'title',
 'value' => __( 'Default value', 'text-domain' ),
 'description' => __( 'Box Title', 'text-domain' ),
 'admin_label' => false,
 'weight' => 0,
 'group' => 'Custom Group',
 ), 
 
 array(
 'type' => 'textarea',
 'holder' => 'div',
 'class' => 'text-class',
 'heading' => __( 'Text', 'text-domain' ),
 'param_name' => 'text',
 'value' => __( 'Default value', 'text-domain' ),
 'description' => __( 'Box Text', 'text-domain' ),
 'admin_label' => false,
 'weight' => 0,
 'group' => 'Custom Group',
 ), 
 
 ),
 )
 ); 
 
 }
 
 
 // Element HTML
 public function vc_infobox_html( $atts ) {
 
 // Params extraction
 extract(
 shortcode_atts(
 array(
 'title' => '',
 'text' => '',
 ), 
 $atts
 )
 );
 
 // Fill $html var with data
 $html = '
 <div class="vc-infobox-wrap">
 
 <h2 class="vc-infobox-title">' . $title . '</h2>
 
 <div class="vc-infobox-text">' . $text . '</div>
 
 </div>'; 
 
 return $html;
 
 }
 
} // End Element Class
 
 
// Element Class Init
new vcInfoBox();

Leave a Reply