Docs » Creating a Theme

A Webhook theme is a .zip file containing templates and static assets you want to load into a blank website after a generic wh create is run. This zip archive can optionally include a .preset-data.json file in the root that will auto-build the CMS forms to your specifications when the theme is installed.

Check out this example

You can find a podcast + blog theme on Github here.

Steps to creating a theme

  1. wh create a new Webhook site as normal.
  2. Set up your CMS forms and edit your templates and static files locally as normal.
  3. Run wh preset-build in your webhook site directory in your terminal. This will create the .preset-data.json file.
  4. Put the portions of the site you wish to be a theme up on Github.

Putting your theme online

To use your theme, you'll need to host a .zip file online somewhere. We recommend putting your theme's source code on Github, which will automatically create a zip file that's available online and will update as you make changes.

Your hosted code doesn't need to include your entire site folder, it should just be the bits you actually want to add on top of a generic wh create. Your .zip file could include nothing more than static/css files and an overwrite of templates/partials/base.html for example, but could also add new folders, files and even new Gruntfiles.

Danger

Do not include firebase.conf or pages/cms.html in your theme. These file contain information specific to your database and should not be passed to other users.

Using your theme

Using a theme in a new Webhook site is easy.

  1. wh create a new Webhook site as normal.
  2. cd into your new site's directory and wh serve it.
  3. When your browser loads, pick the "Start from a theme" option.
  4. Paste the URL of your zip in the "Custom theme" area and hit "Load".

Frequently asked questions about themes

Can I use a use a custom Gruntfile in my themes? How about package.json?

Yes, you can use Grunt and load a custom Gruntfile. However, remember that any Grunt tasks you wish to run will only be run for your local builds and not run on the live server. Furthermore, any additions you make to package.json will work locally, but again, not on the live site. Including a package.json file is also dangerous in that your theme may get out of date with newer build systems we create.

Therefor it is recommended to include documentation to manually edit Webhook's package.json file rather than overwriting it in your theme unless you plan on being super diligent on keeping up changes.

Building the CMS automatically is great, but can I load actual starter data as well?

Yes! Using the command wh preset-build-all instead of wh preset-build will populate your .preset-data.json file with the content from your site as well as its form structure.