Pretty Statamic Theme URLs

Some people dislike ugly URLs. I am one of those people. If you are too, this article is for you.

Problem

In Statamic, generally speaking, you place your theme files in:

/_themes/my_theme/

Which makes your asset URLs (images, js, etc) look like:

http://mysite.com/_themes/my_theme/css/my_theme.css

We want them like this:

http://mysite.com/assets/css/my_theme.css

Previously you could use the asset pipeline, and just hard code /assets/my_theme.css. Statamic would see if there was a corresponding file in your actual theme folder, and serve it through that URL. They’ve since deprecated this because of the performance overhead.

Solution

To continue to use the asset URLs, follow these steps:

1. Move the contents of /_themes/my_theme/ folder to /assets/

2. In _config/settings.yaml, update the following:

   _theme: assets
   _themes_path:
   

   (Yes, _themes_path is meant to be blank)

3. Now you can use {{ theme:partial src="theme.css" }} and it will output as /assets/css/mytheme.css.

Bonus tip

You can simplify your template code even further by making better use of the theme tag.

Instead of typing out

<link rel="stylesheet" href="{{ theme:css src='my_theme' }}" />

Just do this:

{{ theme:css src="my_theme" tag="yes" }}
# Outputs: <link rel="stylesheet" href="/assets/css/my_theme.css" />

The tag="yes" parameter works for CSS (link), JS (script) and image (img) types.