User Guide
What CE Variables for ExpressionEngine® Is
CE Variables is an ExpressionEngine® plugin. This means that it does not have a user interface, but is intended as a development tool to be used in your templates. It allows you, as the developer, to have a very tight control over your template content.
Why CE Variables?
Because it is better than the old way. It can help you leverage template partials to write better, smarter, more re-usable code.
The Old Way (Embed Soup)
Back in the day, the more embeds you used in your ExpressionEngine® templates, the cooler you were. You were praised for how modular your sites were, and you would go to bed at night with the pride of knowing that each small piece of your site was broken up into it's own embeddable chunk. Caching wasn't really on anyone's radar, and nobody thought twice about having a ridiculously slow site.
At best, we used to use 2 embeds in each of our page templates. Something along these lines:
{exp:channel:entries limit="1" disable="categories|member_data|pagination" require_entries="yes"}
{embed="site/_header" title="{title}"}
{body}
{embed="site/_footer"}
{/exp:channel:entries}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{embed:title}</title>
</head>
<body>
<div id="content">
</div><!-- #content -->
</body>
</html>
At worst, the old-timer EEers (and some new ones too…) would use dozens of embeds per template (I have literally seen several of said sites for support requests and performance audits, with several of the embeds having multiple embeds inside of them, and some of them inside of loops that were inside of loops). Needless to say, such sites were slow and hard to maintain.
Another problem with the old way, was that it was a common practice to pass variables to an embed, that were then passed to another embed, and so on. Re-using the embedded templates could become confusing, as you needed to ensure that you were sending in all of the variables you would need for each level of the embed soup (kind of like the movie Inception, but not as entertaining).
As ExpressionEngine developers have evolved though, we have learned that using a lot of embeds is not cool. We care about template organization, making our templates re-usable, and keeping our sites fast like greased lightning.
Okay, enough with the reminiscing. Let's talk about the new age.
The New Way (Template Partials)
Perhaps the best and worst part of ExpressionEngine, is parse order. It is very powerful, and allows cool things to happen, but sometimes it is incredibly difficult to tame. One really neat EE nuance is the fact that Global Variables that are set in a template, are then available to any embeds in that template (no matter where the embeds show up in the template). This means that we can create variables anywhere in the main template, and then retrieve those variables anywhere in its embedded templates. This is the heart of the "template partials" approach.
Template partials are an easy way to extend templates. Let's first create a layout template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
{!-- get the page title --}
<title>{exp:ce_vars:page-title default="My Site"}</title>
</head>
<body>
<div id="content">
{!-- get the page content --}
{exp:ce_vars:content}
</div><!-- #content -->
</body>
</html>
We can see in the above template, that there are a few variables ("getters") that are waiting to be set. We can now re-use this layout from any other template:
{embed="layouts/_master"} {!-- The layout to extend --}
{exp:channel:entries limit="1" disable="categories|member_data|pagination" require_entries="yes"}
{!-- set the page title --}
{exp:ce_vars:page-title}{title}{/exp:ce_vars:page-title}
{!-- set the page content --}
{exp:ce_vars:content}{body}{/exp:ce_vars:content}
{/exp:channel:entries}
The template above sets the page-title and content variables, so that the "layouts/_master" template can use them to create the page. If the {title} variable returned Template Partials, and the {body} variable was set to <p>Template partials are awesome!</p>, then our final page would look something like this:
<html>
<head>
<meta charset="utf-8">
<title>Template Partials</title>
</head>
<body>
<div id="content">
<p>Template partials are awesome!</p>
</div><!-- #content -->
</body>
</html>
The beauty of the template partials approach is that it can drastically cut down on expensive (slow and intensive) embed calls. We can set variables from anywhere in the template it makes sense, and rest assured that the variables will be available to us in our layout (or master) template. It also allows us to keep our templates simple and DRY.
The example above is just scratching the surface. There are a lot of useful tags that make coding EE templates enjoyable (and smart) again. Check out the CE Variable tags.
Other Resources
If you are interested in template partials and/or add-ons that can get and set variables, you may also be interested in these other add-ons: Stash, MX Jumper, REEposition, NSM Transplant, and/or eMarketSouth’s String (not to be confused with CE String).
Additionally, EE 2.8+ includes support for Template Layouts. They are not quite as flexible or friendly as some of the third-party options, but it's not a bad idea to be familiar with them.