Add Custom Templates to the Template LibraryPRO

When users create a new form they use the Add New admin page in WS Form. This displays the template library which contains a combination of built in templates and templates added by add-ons. It is also possible for you to add your templates to this page.

There are a few steps to setting this up.

1. Create and export custom templates
2. Create a custom template directory structure
3. Create a config.json file
4. Register your custom template directory

Create and Export Custom Templates

Creating custom templates is easy with WS Form! Simply create a new form and then export the form to a JSON file. To export a form, click the export  icon at the top of the layout editor. You’ll put any exported form files in a custom template directory.

Exported forms have a file name such as: wsf-form-my-custom-template.json

Create a Custom Template Directory

You can create a custom template directory anywhere that is accessible to your web server. We recommend using the wp-content directory which won’t be overwritten when you update WordPress, plugins or themes. An example location for your custom template directory relative to the WordPress root directory might be:

wp-content/ws-form/templates/

Within this folder you will create a folder that will contain your JSON template files. For example:

wp-content/ws-form/templates/my-custom-templates/

You can add as many custom templates as you wish into this folder.

An example path full path to a JSON template file might be:

wp-content/ws-form/templates/my-custom-templates/wsf-form-my-custom-template.json

A config.json file will also be placed in the root of your custom template directory.

Create a config.json File

The config.json file describes your custom template directory structure to WS Form. The file is located in the root of your custom template directory. For example:

wp-content/ws-form/templates/config.json


An example config.json file is shown below:

{"template_categories": [

    {
        "id"        : "my-custom-templates",
        "label"     : "My Custom Templates",
        "file_path" : "my-custom-templates/",
        "templates" : [

            {
                "id"           : "wsf-form-my-custom-template",
                "label"        : "My Custom Template",
                "file_json"    : "wsf-form-my-custom-template.json",
                "pro_required" : 1
            }
        ]
    }
]}

Each custom template category is defined as an object in the template_categories array. Each category is configured as follows:

Each template description is defined as an object in the templates array key as follows:

Register the Custom Template Directory

To tell WS Form about your custom template directory, you use the wsf_template_form_config_files filter hook. This filter hook has a single parameter passed to it which is an array of the template config.json files used by the Add New admin page.

Using the example file custom template directory path above, an example of using this filter hook is shown below:

// Register filter function for wsf_template_form_config_files hook
add_filter('wsf_template_form_config_files', 'my_template_form_config_files', 10, 1);

// Filter function for wsf_template_form_config_files hook
function my_template_form_config_files($config_files) {

    // Add path to my config.json file
    $config_files[] = WP_CONTENT_DIR . '/ws-form/templates/config.json';

    // Return $config_files array to WS Form
    return $config_files;
}

This code would typically be placed in your themes functions.php file (preferably a child theme is one exists) but it could also be added using a custom code plugin.

Example Completed Template Directory

An example completed template directory might look as follows:

wp-content/ws-form/templates/
wp-content/ws-form/templates/config.json
wp-content/ws-form/templates/my-custom-templates/
wp-content/ws-form/templates/my-custom-templates/wsf-form-my-custom-template-1.json
wp-content/ws-form/templates/my-custom-templates/wsf-form-my-custom-template-2.json
wp-content/ws-form/templates/my-custom-templates/wsf-form-my-custom-template-3.json