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.