Skip to content

Instantly share code, notes, and snippets.

@Sharifur
Created March 26, 2018 06:01
Show Gist options
  • Save Sharifur/1380721b8869f36f289decedb97bc7e2 to your computer and use it in GitHub Desktop.
Save Sharifur/1380721b8869f36f289decedb97bc7e2 to your computer and use it in GitHub Desktop.
Create New Param Type in visual composer
<?php
vc_add_shortcode_param( $name , $form_field_callback, $script_url );
vc_add_shortcode_param( 'my_param', 'my_param_settings_field' );
function my_param_settings_field( $settings, $value ) {
return '<div class="my_param_block">'
.'<input name="' . esc_attr( $settings['param_name'] ) . '" class="wpb_vc_param_value wpb-textinput ' .
esc_attr( $settings['param_name'] ) . ' ' .
esc_attr( $settings['type'] ) . '_field" type="text" value="' . esc_attr( $value ) . '" />' .
'</div>'; // This is html markup that will be outputted in content elements edit form
}
vc_add_shortcode_param( 'my_param', 'my_param_settings_field' );
function my_param_settings_field( $settings, $value ) {
return '<div class="my_param_block">'
.'<input name="' . esc_attr( $settings['param_name'] ) . '" class="wpb_vc_param_value wpb-textinput ' .
esc_attr( $settings['param_name'] ) . ' ' .
esc_attr( $settings['type'] ) . '_field" type="text" value="' . esc_attr( $value ) . '" />'
.'</div>'
.'<button class="flip-input-text">Flip</button>'; // New button element
}
!function($) {
$('#vc_properties-panel .flip-input-text').click(function(e){
e.preventDefault();
var $input = $(this).prev().find('.my_param_field'),
text = $input.val();
$input.val(text.split("").reverse().join(""));
});
}(window.jQuery);
vc_add_shortcode_param('my_param', 'my_param_settings_field', get_template_directory_uri().'/vc_extend/flip.js');
add_action( 'vc_before_init', 'your_name_integrateWithVC' );
function your_name_integrateWithVC() {
vc_map( array(
"name" => __( "Bar tag test", "my-text-domain" ),
"base" => "bartag",
"class" => "",
"category" => __( 'Content', 'my-text-domain' ),
"params" => array(
array(
"type" => "my_param",
"holder" => "div",
"class" => "",
"heading" => __("Flipping text", "js_composer"),
"param_name" => "fliping_text",
"value" => '',
"description" => __( "Enter text and flip it", 'my-text-domain' ),
),
),
) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment