Anatomy of a Theme

The things a theme will contain.

A theme is a small collection of files that dictate the look and feel for a Statamic site. These files are organized into specifically-named folders.

Folder Structure

A typical theme will have these folders:

_themes/
    your-theme/
        css/
        img/
        js/
        layouts/
        partials/
        templates/
        theme.yaml

What Goes Into Each Folder

css

This is where your theme’s CSS files go. Although this folder isn’t required to use Statamic, using it will let you use the theme CSS helper.

img

This is where theme-specific image files live. We don’t suggest that you put content-related images in here. The ultimate goal is to keep your content separated from the theme as much as possible. Only images that are a part of your design should be placed here.

js

Your theme’s JavaScript files go here. Like the css folder, this folder isn’t required, but files within it will become available through the theme JS helper.

layouts

This folder contains your site’s layouts. A theme must have at least one layout file to work. Most themes will only need one or two layouts at the most.

partials

Partials are small, reusable chunks of code (think embeds or includes in other systems). All of those live here. You can access your theme’s partials through the theme partial helper.

templates

This folder is where your theme’s templates files live. A theme must have at least one template file to work.

theme.yaml

Themes can optionally include a YAML file for configuring the theme. The settings within will vary from theme to theme, and don’t be surprised if a lot of themes don’t come with this file at all. If it’s here, Statamic will use it.

Other Folders

A theme can contain any number of other folders as well. There is no limit to how you organize a theme, although there are a couple of naming conventions you should consider. Your theme folder should contain all files needed to render your design.

Other folders you might see in a theme from time to time: scss, fonts, assets, etc.