Web Development

Get More out of ExpressionEngine Templating

I first began dabbling with website development in 2005. Like all of us starting out, I had a lot to learn, and I wasn’t great at it. But one thing I realized pretty early on is I really didn’t like the way WordPress worked. My intention here is not to rail against WordPress. There are a lot of people who like it, and that’s fine, but I don’t. Specifically, I didn’t like the way templating worked. I wanted more control over the structure, and more control over the markup. People bend WordPress to their will, and the system has entirely changed  since the last time I had anything to do with it, but that was the beginning of my journey.

End of The Tunnel

Turns out that the light at the end of the tunnel is ExpressionEngine.

I set out to discover something better, and after trying a few systems out, I found ExpressionEngine. Even with ExpressionEngine 1, which was the current version at the time, the potential for controlling every aspect of a website and building templates on your terms was far superior to anything else I had encountered. In addition, the Channel model (strangely called Weblogs at the time in EE 1) where you can have unlimited different content types and “buckets” for those content types was paradigm changing for me. ExpressionEngine 2 has only built upon those concepts.

 As my web development skills have grown, my desire to program in a manner that is more DRY has also grown. I also began to discover that sometimes I need to work with or subvert the template Parsing Order in some manner to accomplish some of the things I needed to do.

In the past, I have accomplished many of those things with template embeds, but those come at a performance cost. For every embed, the template parser is run as a separate instance as if it was a stand-alone template. across more than a couple embeds,  the performance implications are enormous.

This is why I began experimenting with Mark Croxton’s Stash add-on, which is amazing. But rather than trying to tell you how amazing it is, I would like to explain how we use Stash in conjunction with ExpressionEngine Snippets and standard templates to do really cool stuff with our templating.

When I was hired at Caddis, I was delighted to discover that not only was Stash already in use here, but the process was much further down the road that I had been able to get on my own.

Templates and Onions

Let's start with the core concept. I like to think of templating like an onion — well, inasmuch as the way we template is sort of like the  layers of an onion. Here's what it looks like:

  1. Primary Template (specific markup for current page)
  2. Layout (global)
  3. Header/Footer (global)

Previously, we were only able to really do two layers because there was no concept of setting content and getting it in another template with ExpressionEngine. You would have header and footer Snippets (EE 2), or embeddable templates (EE 1), and call them at the top and bottom of your primary template respectively.

With Stash, we can now set things in our primary template, and call them in another template, or in our case, a Stash embed. If you are familiar with EE, I’ll be starting with where you’re comfortable: the primary template. If you are not familiar with EE, allow me to offer a brief recap of how templating works.

In ExpressionEngine, there are template groups, and in those template groups, there are templates. Each template group has an index template, which is the default template for that group. In one of the groups, you designate the index template as your site homepage. Each template corresponds to a URL on the front end. The exception to this is the index template you have designated as your home page. The URL structure looks like this:

  • mysite.com/index.php/template_group
  • mysite.com/index.php/template_group/template

In the first URL above, the index template of that group would be loaded. In the second example, a specific template in the template group is loaded. Whatever markup or dynamic parameters is in any given template is what is rendered to the user when accessing the specified URL.

The First Layer

Let's start with the primary template (or the one specified in the URL). At the most basic level, we write markup and dynamic template tags in the template, and that is what's displayed. In our case, we're going to start by embedding a layout file using a Stash embed.

{stash:embed file_name="layouts:default"}

This is the syntax to call a file in the Stash directory (the directory where Stash looks for its files is, or can be, specified in the EE config file). In this case, it will look for and load a Stash template file called "default.html" in a directory called "layouts".

Then we need to set content to be retrieved in the layout file. We set everything in a Stash Set tag which we have name "content" at Caddis.

{exp:stash:set name="content"}
Markup
{/exp:stash:set}

Depending on how you set up your templating layers, there may be other things you want to set and retrieve at a different level of templating. For now, these examples will give you the basic idea of the first layer.

The Second Layer

Now that we've called a Stash embed and set some content for it, we need to look at what's in that Stash embed. On a simple site, your Stash embed layout might be as simple as something like this:

{snippet_header}
<main role="main">
    {stash:content}
</main>
{snippet_footer}

As you can see we're basically doing two things in this very simple layout file. In the outer layer, we're calling two Snippets, the header and the footer at the top and bottom of the layout, respectively. This essentially wraps our layout.

In between our header and footer, we have our layout markup. Above is just a very simple example. In many scenarios you'll have a lot more markup in the layout file. Perhaps there's a persistent sidebar, or perhaps there's often a sidebar where you would want to stash content with a Stash Set in the primary template for the sidebar, and call it here in the layout template. Which leads me to the second thing we are doing in this layout template...

We then get the content Stash we set in the primary template and place it where it needs to go in the layout. The {stash:content} tag is doing that for us here. Obviously, as I've alluded to, you can have more than just a content Stash. You can stash as many parts as you need and place them anywhere in the layout that you need to.

The Third Layer

The third layer is our header and footer. The great thing about these is they are ExpressionEngine Snippets, and they act just as if they were in whatever template and context they are called in. In case it isn’t clear, that means they can get stashed content just like in our layout file.

So a simple header might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>{stash:title}</title>
</head>
<body>
<nav>
    <a href="/">Home</a>
    <a href="/blog">Blog</a>
</nav>

And a simple footer:

<footer role="contentinfo">
    <small>© 2014, Caddis</small>
</footer>
{stash:script}
</body>
</html>

Endless Possibilities

I don’t know about you, but this way of working with and thinking about templates really opened up new possibilities to me. It allows us to program in a way that is much more DRY. It allows us to use the ExpressionEngine parse order to our advantage. It allows us to create much more efficient templates, and it makes our lives easier as web developers.

I'm sure if this is the first time you’ve seen this or heard of it, your mind is already spinning with the possibilities of how to leverage Stash and ExpressionEngine templating. The bottom line is that parse order doesn't always have to be your enemy. It can, in fact, be your friend if you let it.

Endless Ocean

There's a whole ocean of ideas for you to discover.