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