Themes are a collection of page templates, assets (CSS, JS, etc) and a metadata file. They should use responsive design and be easily edited and viewed. Providing a variety of color schemes is recommended for users to choose from when building their site.
## Folder Structure
This is the folder structure for a standard theme. The root folder shown below should be placed in `[sitewriter app]/public/themes`. **Bold** denotes a folder, *italic* denotes required.
* Theme Name
* _theme.json_
* contact.php
* _default.php_
* _404.php_
* ***colors***
* ***default***
* **green**
* **etc**
## Metadata File
The metadata file is required for SiteWriter to recognize the theme. It must be saved as `theme.json` in the root folder of the theme.
It contains the theme name, singlepage flag, list of page templates, and list of theme colors.
`singlepage` is a flag that tells SiteWriter if the theme is designed for a single-page website. If it is set to true, page creation will be disabled and the site will only have a single page.
`templates` is a list of page templates. A template with an ID of `default` is required. The template ID is the name of the template file without the .php extension. For example, SiteWriter loads `home.php` to show a page with the `home` template.
`colors` is a list of color schemes for the theme. The color ID is the name of the folder where the color-specific assets are stored. A color of `default` is required. If the chosen color is `green`, the color-specific assets should be placed in `colors/green` in the theme folder.
### Sample `theme.json`
```js
{
"name": "My Theme",
"singlepage": false,
"templates": {
"default": {
"title": "Default",
"description": "A regular page."
},
"home": {
"title": "Home",
"description": "A homepage."
},
"contact": {
"title": "Contact",
"description": "A contact page."
},
},
"colors": {
"default": {
"title": "Default",
"description": "Blue color theme"
},
"green": {
"title": "Green",
"description": "Green color theme"
}
}
}
```
## Templates
### `default.php`
`default.php` is the default template file for a normal page in your theme. It is a standard PHP script containing HTML markup. It should never be loaded directly by a web browser, so you can safely assume theme functions and other SiteWriter theme utilities to be present.
### `404.php`
As the name implies, this template is loaded to handle 404 errors. It is not user-selectable as a page template. It should not contain any user-editable fields, as there is currently no way for a user to edit site error pages.
### `contact.php`
It is highly recommended to have a contact form template included in your theme. It should contain a standard form that POSTs to `contact.php` with the fields `name`, `email`, and `message`.
## Template Requirements and Considerations
Do not use the optional `<html>`, `<head>`, and `<body>` tags for your template HTML. The editor relies on being able to append code to the document and have it still work normally.
Do include FontAwesome 5 in your theme. The SiteWriter editor allows the user to pick icons from the FontAwesome Free icon set to enhance their content.
Do include company info (business name, phone number, address, and email) and social media links (Facebook, Twitter, YouTube, Mastodon, etc) in the theme. These can be setup in the sitewide settings, and users will expect themes to make use of this information.
Do include `<?php get_header(); ?>` and `<?php get_footer(); ?>` snippets in your templates. They are used to inject additional content into the template, such as third-party analytics code.
Do copy code from the Bootstrap theme included with SiteWriter.
## Common Component Names
To make theme transitions as seamless as possible, try to use the same component names as other themes for equivalent components.
* Page subtitle: `lead`, plain text
* Page content: `content`, rich text
* Page banner (not page title): `banner-title`, plain text
* Content cards: `cardrow-$i`, rich text (where $i is a number between 1 and 3)
* Action buttons above the fold: `banner-btn-$i`, complex component with icon, link, and text (where $i is 1 or 2)
* Contact form submit button: `submit-btn`, complex component with icon and text
Consult the included Bootstrap and Verti themes for example usage of these common components.
## Example Template
Below is a minimal functional `default` template that fulfills the above requirements.