Conventions

Follow our naming conventions for best results.

Aside from the layouts and templates folders, you can create as many folders as you’d like within your theme’s directory, and you can name them whatever you’d like. However, we’ve set up a couple of naming conventions with theme helpers for you to more easily use your theme’s files.

Unless you have a specific reason to do your own thing, it’s a best practice to follow the following conventions.

CSS and JavaScript

Your stylesheets and scripts should be placed into a css folder and a js folder (respectively) at the root of your theme’s folder. Stylesheets and scripts placed within these directories will be easily accessed via theme helpers.

Your Main Stylesheet

Your main stylesheet should be named the same thing as your theme. If your theme is called Flannel and comes in a flannel folder, your main stylesheet should be flannel.css in your theme’s css folder. Again, this makes using the theme helpers easier.

Your Main JavaScript File

Your main script file should be named the same thing as your theme. Continuing the example above, you would name your main script file flannel.js, and it would live in your theme’s js folder.

Includes, Embeds, or Partials

If you’ve used other systems before Statamic (and you probably have), you have a name for “small, reusable chunks of code.” It’s probably either an “include,” an “embed,” or a “partial.” Statamic calls them partials, and we recommend that for building Statamic sites, you do too.

Doing Your Own Thing

If you choose to not use our naming convention (and thus, rendering the theme helpers useless), you can find the path to your theme with {{ theme_path }}. This tag will dynamically find your theme’s folder relative to the site’s web root, allowing you access to any of your theme files.