Expert Group of programming
Loading...

Visual Composer : Create VC shortcode with editor and checkbox

Posted by : Heycode Tech | Posted in : Download, Visual Composer | Jul 16,2016 | 0 comments

WordPress is the most popular CMS in the world and by using of the plugin :Visual composer : it’s so popular and easy to edit the wordpress admin editor and easily updated the design of the frontend.

Now here is the 2nd post of the visual composer plugin and we will display the field : Editor and Checkbox:.

Sometime, we need to create the own :Visual composer component : i.e we need to add the custom short-code component in Visual composer .
Here I'm displaying an example where we will create a custom visual composer component in which it have the : Editor and Checkbox: both.

For creating an : Editor and Checkbox: we need to call the array : vc_map() with the following parameter’s and it’s demo values.

vc_map( array(
            "name" => __("HeyCodeTech - demo field", 'vc_extend'),
            "description" => __("Listing of all the demo fields.", 'vc_extend'),
            "base" => "#shortcodeNameHere#",
            "class" => "#classNameHere#",
            "controls" => "full",
            //"icon" => plugins_url('assets/asterisk_yellow.png', __FILE__), // or css class name which you can reffer in your css file later. Example: "vc_extend_my_class"
            "category" => __('Content', 'js_composer'),  //which category your shortcode embedded.
           
            "params" => array(
                array(
                  "type" => "textarea_html",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Text", 'vc_extend'),
                  "param_name" => "#fieldName#",
                  "value" => __("Demo Value", 'vc_extend'),
                  "description" => __("description of title here", 'vc_extend')
              ),
            array(
                  "type"        => "checkbox",
                  "heading"     => __("Select category"),
                  "param_name"  => "#fieldName#",
                  "admin_label" => true,
                  "value"       => array(
                                   'First Option'=>'first',
                                   'Second Option'=>'second',
                                   'Third Option'=>'third',
                                   'Fourth Option'=>'fourth'
                                        ), //value
                  "std"         => " ",
                  "description" => __("description here.")
                  ),
            )
        ) );

Now you will change the name of the field, value of the field.
Below is the complete code which is used to create a text-area and radio button both.
Download Code

<?php
class VCExtendAddonClass_2{
    function __construct() {
        // We safely integrate with VC with this hook
        add_action( 'init', array( $this, 'integrateWithVC' ) );
        // Use this when creating a shortcode addon
        add_shortcode( 'demoShortcode', array( $this, 'renderDemoFunction' ) );
        // Register CSS and JS
        add_action( 'wp_enqueue_scripts', array( $this, 'loadCssAndJs' ) );
    }

    public function integrateWithVC() {
        // Check if Visual Composer is installed
        if ( ! defined( 'WPB_VC_VERSION' ) ) {
            // Display notice that Visual Compser is required
            add_action('admin_notices', array( $this, 'showVcVersionNotice' ));
            return;
        }
    //call the field array.
      vc_map( array(
            "name" => __("HeyCodeTech - demo field", 'vc_extend'),
            "description" => __("Listing of all the demo fields.", 'vc_extend'),
            "base" => "demoShortcode",
            "class" => "class",
            "controls" => "full",
            //"icon" => plugins_url('assets/asterisk_yellow.png', __FILE__), // or css class name which you can reffer in your css file later. Example: "vc_extend_my_class"
            "category" => __('Content', 'js_composer'),
           
            "params" => array(
                array(
                  "type" => "textarea_html",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Text", 'vc_extend'),
                  "param_name" => "textfieldname1",
                  "value" => __("demo Value", 'vc_extend'),
                  "description" => __("Title", 'vc_extend')
              ),
            
            array(
                  "type"        => "checkbox",
                  "heading"     => __("Select category"),
                  "param_name"  => "selectboxname",
                  "admin_label" => true,
                 "value"       => array(
                                   'First Option'=>'first',
                                   'Second Option'=>'second',
                                   'Third Option'=>'third',
                                   'Fourth Option'=>'fourth'
                                        ), //value
                  "std"         => " ",
                  "description" => __("display all the posts.")
                  ),
            )
        ) );
    }

    /*
    Shortcode logic how it should be rendered
    */
    public function renderDemoFunction( $atts, $content = null ) {
       extract( shortcode_atts( array(
        'textfieldname1'=> '',
        'selectnoxname'=>''
      ), $atts ) );
     
     //print_r($atts);

      $textfield      = $atts['textfieldname1'];
      $selectboxfield = $atts['selectboxname'];
 // ob_get_clean();
     //create buffer string 
     ob_start();
     
    ?>
<div class="heycodetech-container container">
   
     <div class="list-value">
          <p>TextField Value = <?php echo $textfield;  ?></p>
          <p>Selected checkbox = <?php echo $selectboxfield;  ?></p>
      </div>
   
</div>

<?php
    $output = ob_get_contents();
    ob_get_clean();
      return $output;
    }

    /*
    Load plugin css and javascript files which you may need on front end of your site
    */
    public function loadCssAndJs() {
     wp_register_style( 'vc_extend_style', plugins_url('assets/vc_extend.css', __FILE__) );      wp_enqueue_style( 'vc_extend_style' );

      // If you need any javascript files on front end, here is how you can load them.
     wp_enqueue_script( 'vc_extend_js', plugins_url('assets/vc_extend.js', __FILE__), array('jquery') );
    }
    
    /*
    Show notice if your plugin is activated but Visual Composer is not
    */
    public function showVcVersionNotice() {
        $plugin_data = get_plugin_data(__FILE__);
        echo '
        <div class="updated">
          <p>'.sprintf(__('Notice of visual composer', 'vc_extend'), $plugin_data['Name']).'</p>
        </div>';
    }
}
// Finally initialize code
new VCExtendAddonClass_2();
?>

How to Use this Code

1: put this code in file : functions.php
2:Login to admin dashboard and open the visual composure,
3:you can seen the newly created visual field with named :HeyCodeTech-demo field:. in visual composer category named- content .

It have the Editor and checkbox both.

visualcomposer-shortcode

visualcomposer-field-editor-checkbox

Key Functions
In this module,only three class is used . These are :

        add_action( 'init', array( $this, 'integrateWithVC' ) );
        // Use this when creating a shortcode addon
        add_shortcode( 'demoShortcode', array( $this, 'renderDemoFunction' ) );
        // Register CSS and JS
        add_action( 'wp_enqueue_scripts', array( $this, 'loadCssAndJs' ) );

1: add_action( 'init', array( $this, 'integrateWithVC' ) ); :
This function is used for creation the admin panel i.e shortcode visual admin.It have the field type and it’s name.

2: add_shortcode( 'demoShortcode', array( $this, 'renderDemoFunction' ) ); :
This function is used for creation the front-end panel and display the value which is set by the admin.

3: add_action( 'wp_enqueue_scripts', array( $this, 'loadCssAndJs' ) ); :
This function is used to add the JS and CSS file globally.

Important
>> The value of base name like(“base” => “demoShortcode”) should same with shortcode name like add_shortcode( ‘demoShortcode’, array( $this, ‘renderDemoFunction’ ) );

Visual Composer  2  Create VC shortcode with editor and checkbox   HeyCode Tech

Please let me know if need any help.

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and more Here is the Expert group of programming.