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' ) ) {
return;
}
// 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:
<?php
/**
* Class to load for this map.
*/
class VC_Custom_InfoBox extends WPBakeryShortCode {
/**
* Shortcode display.
*/
protected function content( $atts, $content = null ) {
// Variables.
$display = '';
$attr = array();
extract(
shortcode_atts(
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(
array(
'type' => 'textfield',
'heading' => esc_html__( 'Title', 'text-domain' ),
'param_name' => 'title',
'value' => ''
),
array(
'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
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.