Filter and Hooks, Programming, WordPress

Create File Upload Type in Visual Composer

Visual Composer by default doesn’t support “attach_file” type. Therefore, at any of point of time if we need to add files, we should add new attribute type for content element attributes that can attach file.

The vc_add_shortcode_param() function is used to register an attribute type handler which will form html markup for settings form in WPBakery Page Builder edit element form. It takes three parameters:

  1.  the attribute type name (String used in vc_map() mapping function in type parameter),
  2.  the callback function name and
  3. the javascript file absolute url.

vc_add_shortcode_param( $name , $form_field_callback, $script_url );

In this article, we are adding new attribute type “attach_file” type to upload files in the Visual Composer.

Lets create callback function and register it with vc_add_shortcode_param() function call.

We have added the script for media manager in the callback function . But, we can also create a separate script file and add the script url in the third parameter of vc_add_shortcode_param().

i.e. vc_add_shortcode_param( ‘file_picker’, ‘file_picker_settings_field’,get_template_directory_uri().’/vc_extend/file_picker.js’)

Note that script saves the attachment id but shows the url. Using the attachment id we can get the attachement url.

That’s it!! Now we can use this field in vc_map() function. Here is example with the new param added to the “params” array using our custom attribute type “file_picker”:

Finally, add shortcode to display the attach file.

Note : Create a separate file for the visual composer code so that you can separate it from the rest of your function.

To upload multiple files we can Use Param Group in Elements. Let’ see the example :

Shortcode to display the multiple file uploaded :

To parse this values in param_group we use the helper function vc_param_group_parse_atts(). vc_param_group_parse_atts() generates indexed array of arrays with [key=value]  whic is  iterated to output  the values.

Reference : Stackoverflow

 

 

 

 

 

Hits: 46

Standard