[Development Guides Home](/guides) >> [Guide to Site Publisher Templates](/guides/guide-to-site-publisher-templates)

# Guide to Site Publisher Templates - Template Files

## Introduction

This document provides basic information about the files that most templates include. The additional files that you include in each Site Publisher template (for example, fonts, images, or CSS files) depend on the specifics of your design.

## Template files

Site Publisher templates should include the following files, as well as additional style- and design-related files, license files, or `readme` files that you wish to include:

| File name | Type | Description |
|  --- | --- | --- |
| `meta.json` | JSON | Every Site Publisher template that you create must include a `meta.json` file in the main template directory. cPanel's [*Site Publisher*](https://docs.cpanel.net/cpanel/domains/site-publisher/) interface (*cPanel >> Home >> Domains >> Site Publisher*) uses this file to display template information and generate the form fields in the *Customize and Publish* step.For more information, read our [Guide to Site Publisher Templates - The `meta.json` File](/guides/guide-to-site-publisher-templates/guide-to-site-publisher-templates-the-meta-json-file) documentation. |
| `*.tt` | Template Toolkit | The template's `.tt` files include the variables from the `meta.json` file in [Template Toolkit](/guides/guide-to-template-toolkit/) markup. This file can use many different types of code (for example, JavaScript, CSS, or HTML).When users publish a site with this template, the system replaces these variables with the user's input, and creates a static file that will exist in the domain's home directory. For example, a `.html.tt` file in the template will become a `.html` file in the published website. |
| `preview.png` | PNG | The preview image that cPanel's [*Site Publisher*](https://docs.cpanel.net/cpanel/domains/site-publisher/) interface (*cPanel >> Home >> Domains >> Site Publisher*) displays for each template in the *Select a Template* step, and for the selected template in the *Customize and Publish* step.**Note:**Preview images **must** be at **least** 370 by 200 pixels. The system will automatically shrink larger images.If you do not supply a `preview.png` file, the interface displays a placeholder image. |


## Example

For example, you could create a template for a simple placeholder website that includes a website title, website description, and a contact email address.

### In the cPanel interface

When users select this template in cPanel's [*Site Publisher*](https://docs.cpanel.net/cpanel/domains/site-publisher/) interface (*cPanel >> Home >> Domains >> Site Publisher*), they will see the following template information:

#### In the Select a Template step

![The Select a Template Step in Site Publisher](/assets/site-publisher-select-a-template-step.84f4b147d78ea4c9371357fe8b4eac20ba71b7529941bf74789b89ad60879c8f.dc6bb469.png)

#### In the Customize and Publish step

![The Customize and Publish step in Site Publisher](/assets/site-publisher-customize-and-publish-step.645662d98d58a1d076e336e1897dd6049f61f343ee53373435c23adfd8d62519.dc6bb469.png)

### Files

This template would include the following files:

#### meta.json

This file supplies the template's data, and ensures that cPanel's [*Site Publisher*](https://docs.cpanel.net/cpanel/domains/site-publisher/) interface (*cPanel >> Home >> Domains >> Site Publisher*) displays the *Website Title* (`site_title`), *Website Description* (`description`), and *Contact Email Address* (`email`) text boxes.


```json
{
   "information":{
      "id":"example_template",
      "name":"An Example Template",
      "description":"An extremely simple example of a one-page placeholder website template.",
      "preview_image_path":"preview.png"
   },
   "fields":[
      {
         "id":"site_title",
         "label":"Website Title",
         "type":"text",
         "placeholder":"My New Website."
      },
      {
         "id":"description",
         "label":"Website Description",
         "type":"textarea",
         "placeholder":"I'm really excited to use Site Publisher!"
      },
      {
         "id":"email",
         "label":"Contact Email Address",
         "type":"text",
         "placeholder":"myname@mydomain.com"
      }
   ]
}
```

#### index.html.tt

This file uses the `site_title`, `description`, and `email` variables in Template Toolkit code to add user-supplied content to the page. When the system uses this file to generate the `index.html` file for each Site Publisher website, it replaces the Template Toolkit code with user-supplied content.


```html
<!DOCTYPE html>
<html lang="en">
<body>
    <div class="page-header">
        [% IF site_title.length %]
        <h3>[% site_title | html %]</h3>
        [% END %]
    </div>
    <div class="page-body">
        [% IF description.length %]
        <p>[% description | html %]</p>
        [% END %]
        [% IF email.length %]
        <p>To contact me, send an email to [% email | html %]!</p>
        [% END %]
    </div>
</body>
</html>
```

#### preview.png

This image will display in the Select a Template section of cPanel's [*Site Publisher*](https://docs.cpanel.net/cpanel/domains/site-publisher/) interface (*cPanel >> Home >> Domains >> Site Publisher*), and in the Customize and Publish step when the user selects this template.

![The Select a Template preview image](/assets/site-publisher-preview-image.8209d0389e41a3ceb0f1ac20c291f61a6392a18683c29377470978e0f593ce4c.dc6bb469.png)

### Checks for provided values

If you wish to check whether a user provided a value, we **strongly** recommend that you use a `.length` check within your template file. A `.defined` check will **not** return the desired result because cPanel's [*Site Publisher*](https://docs.cpanel.net/cpanel/domains/site-publisher/) interface (*cPanel >> Home >> Domains >> Site Publisher*) stores blank values rather than undefined values.

For example, to check whether a user supplied a value for the `fullName` variable, include the following code in your Template Toolkit file:


```html
[% IF fullName.length %]
<h1>[% fullName | html %]</h1>
[% END %]
```

This code will display the user-provided `fullName` value if the value contains one or more characters.

### JSON-safe values

To ensure that your template code receives JSON-safe values, you **must** specify the json type for those variables.

For example, if you wish to include the user-provided value for the `employee_firstName` and `employee_lastName` variables in a JavaScript file, you could include the following code in your Template Toolkit file:


```html
<script>
 var example = {"employees" : [
     {"firstName": [% employee_firstName.json %]},
     {"lastName": [% employee_lastName | json %]}
 ]}
 </script>
```

Lines 3 and 4 of this example illustrate two different methods to apply the `json` type to the variable. Your template code may use either method.