Theme Helpers

Quickly finding your theme files.

Theme helpers are Statamic tags that will help you find your template files quickly and easily. There are five helpers, each will find the type of file that you’re looking for and return the full web path to it. You can then stick these paths into their appropriate HTML tags within your layouts and templates.

The CSS Helper

The following tag will print the full web path to the style.css file within the currently selected theme.

{{ theme:css src="style" }}

The src provided is the CSS file’s path that will be printed. In the naming conventions article, we said that your main stylesheet should be the same name as your theme. Doing this will let you leave off the src attribute.

For example, if your theme is in the flannel folder, you can use this:

{{ theme:css }}

To get the path to your theme’s flannel.css, which will probably look something like this:

_themes/flannel/css/flannel.css

Remember that by default, this tag does not print out the entire HTML <link> tag you’ll probably want to stick this in. If you want it to do this, you can add the tag parameter set to true:

{{ theme:css tag="true" }}

Otherwise, you can write your own HTML tags and place in the path where you need to do so.

The JS Helper

The following tag will print the full web path to the action.js file within the currently selected theme.

{{ theme:js src="action" }}

This tag works similarly to the CSS helper above, it will only print out the path to the file, not the full <script> tag you’ll probably want it in. Similarly, if you followed the naming conventions, and again your theme is called flannel, you can use this tag:

{{ theme:js }}

To get the path to the JavaScript theme file named after your theme, which will probably look something like this:

_themes/flannel/js/flannel.js

Once again, this only returns the path. If you want it to have this tag output the full HTML tag, you can add the tag parameter set to true:

{{ theme:js tag="true" }}

The Image Helper

When you want to access an image from your theme’s img folder, you can use the theme image helper. The following tag will retrieve the full web path to the tent.png file in your current theme’s img folder:

{{ theme:img src="tent.png" }}

Like the other helpers, this only gets the full web page to the file, and doesn’t print out the <img> tag you’ll probably want it in. Also note that for this helper, you’ll need to include the extension of the file you’re attempting to retrieve. Where there is only one extension that CSS and JS files will be, images files can be one of many options.

The Asset Helper

The assets helper lets you access other files that aren’t images or stylesheets or scripts. The src here can include subfolders within the currently selected theme, or access files right at its root level.

{{ theme:asset src="README.txt" }}

This only returns the path of the file requested in the src parameter, where you put the path is up to you.

The Partial Helper

Finally, there is the partial helper, used to embed partials on your page. This tag works similarly to the ones above, for example, to embed the sidebar partial, you would use the following code:

{{ theme:partial src="sidebar" }}

Visit the partials article to learn more about what partials do, how they work, and how the helper works.