Expert Group of programming
Loading...

Visual Composer : Visual composer components

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

Yesterday,I think that we need to write the short syntax for creating an component.I know that we need only the component creation. Once we will develop the component then we will write the logic of our requirements.

Below is the example of the component ‘s syntax which is used to develop the visual shortcode.
For more about the shortcode, you can follow these posts.


Component of Shortcode
Below is the Array of how to use the different component in visual composer shortcode. See below –

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.
       //Textfield in visual composer shortcode    
            "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')
              ),
     //Select box i.e dropdown box in visual composer shortcode
            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.")
                  ),
    //WP Editor in visual composer
                 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')
              ),
    //Checkbox in visual composer shortcode
            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.")
                  )

            )
        ) );

visual-composer

Now by using of this example, you can develop the visual composer shortcode easily.

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 moreHere is the Expert group of programming.