Expert Group of programming
Loading...

Visual Composer : Create VC shortcode with textfield and dropdown

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.

Sometime, we need to create the own :Visual composer component : i.e we need to add the custom short-code component in Visual composer .
Let me take an example where we will create a custom visual composer component in which it have the : Textfield and Select box i.e dropdown : both.

For creating an select box and textfield 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" => "textfield",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Text", 'vc_extend'),
                  "param_name" => "#fieldName#",
                  "value" => __("Demo Value", 'vc_extend'),
                  "description" => __("description of title here", 'vc_extend')
              ),
            array(
                  "type"        => "dropdown",
                  "heading"     => __("Select category"),
                  "param_name"  => "#fieldName#",
                  "admin_label" => true,
                  "value"       => array(
                                          'one'   => 'First Option',
                                          'two'   => 'Second Option',
                                          'three' => 'Third Option',
                                          'four'  => 'Fourth Option'
                                        ), //value
                  "std"         => " ",
                  "description" => __("description here.")
                  ),
            )
        ) );

Now you will change the name of the field, value of the field like select-box , description etc.
Below is the complete code which is used to create a text-field and select-box both.
Download Code

<?php
class VCExtendAddonClass_1{
    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" => "textfield",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Text", 'vc_extend'),
                  "param_name" => "textfieldname1",
                  "value" => __("demo Value", 'vc_extend'),
                  "description" => __("Title", 'vc_extend')
              ),
            
            array(
                  "type"        => "dropdown",
                  "heading"     => __("Select category"),
                  "param_name"  => "selectboxname",
                  "admin_label" => true,
                  "value"       => array(
                                          'one'   => 'First Option',
                                          'two'   => 'Second Option',
                                          'three' => 'Third Option',
                                          'four'  => 'Fourth Option'
                                        ), //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'];
     //create buffer string 
     ob_start();
     
    ?>
<div class="heycodetech-container container">
   
     <div class="list-value">
          <p>TextField Value = <?php echo $textfield;  ?></p>
          <p>Selectbox Value = <?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_1();
?>

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 textfield and selectbox both.

visualcomposer-shortcode

visualcomposer-field

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’ ) );

See in screenshot

Visual Composer  1  Create VC shortcode with textfield and dropdown   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