How We Use ExpressionEngine: Templates and Global Variables
Continuing in our series of how we use ExpressionEngine, I thought it would be cool to show you the power and flexibility of the templates in conjunction with global variables.
One of the main reasons we started using EE was it's flexibility. Other CMS's make you cram your design into their pre-defined templates and make you dig around in huge PHP files. Not so with EE! We code every site from scratch by hand, first creating a static version that we can test in multiple browsers. Then we chop it up into our own templates on our own terms inside EE.
For those of you that don't know, templates are the building blocks of EE. They can be just about any type of file (dynamic, static, RSS, CSS, javascript), be used as a stand alone page or as a small piece of the page. So yes, you can embed a template in another template. Also, EE will use the groups and templates as a URL structure, or you can just use it to group certain templates together.
Recently we found another template type, the global variable. These can't contain any EE specific code as they're made for static content only, but it's a great way to chop up your page into tiny pieces, make it more manageable, and not take a performance hit.
For example, let's say we want the HTML header at the top of every page to be a global variable. We create a new one, call it html_head and paste in
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Then in our template, we simply use the {html_head} call to dynamically place it in when the page is rendered. Pretty cool, huh? Alright, I don't want to get into too much detail about templates and global variables here; you can read the docs for the best way to implement those. But what I am going to do is show you what basic blueprint we use for a normal webpage.
{html_head}
{favicon}
{metatags}
<meta name="description" content="Description goes here" />
<title>Title goes here</title>
{blog_feeds}
{stylesheets}
{js}
{html_head_end}
<body id="sec">
{wrapper_open}
{header}
{embed="global/nav"}
<!--Content Goes Here -->
{wrapper_closed}
{embed="global/footer"}
You can see the global variables and the template embeds as well. Depending on what's in each section, you can change this around as needed. So if our header has some dynamic EE code happening it will need to be an embedded template instead of a global variable. Either way, you can see how much it simplifies each template when you're working.
Of course, this is just a starting point. The awesome thing is that with EE, if you need another global variable or template embedded, you can do it quickly and easily.
So go forth, be more efficient, and use those global variables!
Share This Entry with Your Favorite Social Networking Sites.@jez I had not heard of Modx. I will definitely check it out. Thanks for reading!
So why/when global variables and not embeds?
Best wishes
Lee
@Lee an embed will have EE code in it…like a call to pull recent blog entries. For example, the sidebar on this blog is one big embed.
Global variables are mainly for static html or information. So the header on this page with the logo and tagline would work great for that.
From what I can tell the global variables take less processing than an embed, so we just try to use them wherever we can. Hope that makes sense!
Thanks Jonathan.
Hi, thanks for another informative article. I have yet to use Global Variables on a project, preferring to store such info in a miscellaneous content weblog, and pull it in that way. However, I can see the benefits of global variables and will probably use them on my next (non-client) site.
hi guys,
thanks for posting this. i just started playing with ee yesterday and it seems to be much easier to work with than wordpress if your not creating a blog only.
question - i’m having trouble linking to my css in the global variable -
<link rel=“stylesheet” href=”{stylesheet=my_template_group/style}” type=“text/css” media=“screen”/>
this does not load the styles when placed in a global variable. what is the best way to go about this?
THANKS!
@blee You can’t use EE code in global variables. That’s why they load faster, they’re not parsing anything. You’d have to have a hard link to your stylesheet on the server. Not sure if it’s a template, though. I’d check the documentation, it’s really helpful.
You can use ExpressionEngine and PHP code with the Fresh Variables module, which also works across multiple ExpressionEngine sites.
@Kirk I hadn’t heard of that module before. In what instances do you find it useful?
Even im using Modx and and my question is same that how can i use fresh variables on my templates.
Live Preview
Blog
Categories
Recent Articles
- It’s Hard To Hit A Goal You Don’t Have
- Meet Scott Schuster of Underdog Solutions - Winner of Design Hope 2009
- Outlook is Broken
- ExpressionEngine Giving Free Licenses at Front-End Design Conference
- Design Hope - We Have A Winner!
- archives
Popular Articles
Stop announcing your new project. Just do it.
Rock and Roll people, Rock and Roll.
To all you staff designers out there, here’s a link for you. (via @ryanlascano)
Fascinating look into the music business.
Derek Sivers posts some great advice about balancing your life.
Small Talk With a Web Designer
I just totally went MacGyver on my old iPhone dock and dremel'd it into submission. New iPhone 3GS fits great now!
@necker47 That is random. Haha.
Troy McNeil
Things I Said
ExpressionEngine
The best Content Management System for designers. Feature rich, completely customizable, and easily extendable.
Basecamp
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
Jez
December 30, 2008
Guys,
You can do the same in Modx using Template Variables - if you love EE, you will love Modx and it’s template freedom - and it is open source
Nice site BTW