<?php
/**
* Plugin Name: VisualComposer Example
* Plugin URI: https://urosevic.net/wordpress/
* Description: Example plugin to show how to map custom shortcode to VisualComposer
* Version: 1.0
* Author: Aleksandar Urošević
* Author URI: https://urosevic.net
* License: GPL3
*/
// Do not load this file directly!
if ( ! defined( 'ABSPATH' ) ) {
die( '-1' );
}
// Do not proceed if VC class WPBakeryShortCode does not exists
if ( ! class_exists( 'WPBakeryShortCode' ) ) {
return;
}
// Create shortcode `my_shortcode` for VisualComposer (not available w/o VisualComposer)
if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) {
class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode {
function content( $atts, $content = null ) {
// Extract shortcode parameters
extract( shortcode_atts( array(
'number' => 3,
'colour' => 'red',
'el_class' => '',
'css' => '',
), $atts ) );
// Prepare base element class
$el_class .= " {$this->settings['base']} {$this->settings['class']}";
// Prepare design class
$css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, trim( $el_class ) . vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );
// Prepare output HTML
$out = '<div class="' . esc_attr( $css_class ) . '">';
$out .= sprintf(
'<h3>Number is <strong>%1$s</strong>, colour is <strong style="color:%2$s">%2$s</strong>!</h3>',
(int) $number,
$colour
);
$out .= wpb_js_remove_wpautop( $content, true );
$out .= '</div>' . $this->endBlockComment( $this->settings['base'] );
// Return prepared HTML
return $out;
} // END function content( $atts, $content = null ) {
} // END class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode {
} // END if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) {
// Now map VisualComposer element for custom shortcode my_shortcode
if ( function_exists( 'vc_map' ) ) {
vc_map( array(
'name' => 'My Shortcode',
'base' => 'my_shortcode', // Provides $this->settings['base'] for shortcode method
'class' => 'custom_shortcode',
'category' => __( 'Content', 'js_composer' ),
'description' => __( 'Description for My Shortcode', 'visualcomposer-example' ),
'params' => array(
// Number field
array(
'type' => 'textfield',
'admin_label' => true,
'class' => 'number',
'heading' => __( 'Number', 'visualcomposer-example' ),
'param_name' => 'number',
'std' => 3,
'description' => __( 'Description for number param.', 'visualcomposer-example' ),
),
// Colours dropdown
array(
'type' => 'dropdown',
'admin_label' => true,
'class' => '',
'heading' => __( 'Colour', 'visualcomposer-example' ),
'param_name' => 'colour',
'std' => 'red',
'value' => array(
'White' => 'white',
'Yellow' => 'yellow',
'Gold' => 'gold',
'Orange' => 'orange',
'Pink' => 'pink',
'Red' => 'red',
'Magenta' => 'magenta',
'Lime' => 'lime',
'Green' => 'green',
'Cyan' => 'cyan',
'Blue' => 'blue',
'Black' => 'black',
),
'description' => __( 'Description for colour param.', 'visualcomposer-example' ),
),
// Shortcode content
array(
'type' => 'textarea_html',
'holder' => 'div',
'class' => '',
'heading' => __( 'Text', 'js_composer' ),
'param_name' => 'content',
'value' => __( 'Hello world', 'js_composer' ),
'description' => __( 'Enter your content.', 'js_composer' ),
),
// Custom class field
array(
'type' => 'textfield',
'heading' => __( 'Custom Class', 'js_composer' ),
'param_name' => 'el_class',
'std' => '',
'description' => __( 'Description for el_class param.', 'visualcomposer-example' ),
),
// Design options tab
array(
'type' => 'css_editor',
'heading' => __( 'Css', 'js_composer' ),
'param_name' => 'css',
'group' => __( 'Design options', 'js_composer' ),
),
),
));
}
Comments