PixelfearWeb Development by Jason Varga

Pretty Statamic Theme URLs

Tips, Statamic

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


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


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


We want them like this:


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.


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

    (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.


blog comments powered by Disqus