How We Use ExpressionEngine: Templates and Global Variables

Tuesday, December 23, 2008 ~ 11:58 am

Template Area in EE 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.

Global Variables 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.

Social Web
E-mail

Posted by (JavaScript must be enabled to view this email address) in Tutorials ~ ExpressionEngine ~ (17) Comments ~ (0) Trackbacks

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

(JavaScript must be enabled to view this email address)
December 30, 2008

@jez I had not heard of Modx. I will definitely check it out. Thanks for reading!

(JavaScript must be enabled to view this email address)
January 02, 2009

So why/when global variables and not embeds?

Best wishes
Lee

(JavaScript must be enabled to view this email address)
January 02, 2009

@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!

(JavaScript must be enabled to view this email address)
January 03, 2009

Thanks Jonathan.

Richard Angstmann
January 08, 2009

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.

(JavaScript must be enabled to view this email address)
January 09, 2009

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 -

this does not load the styles when placed in a global variable. what is the best way to go about this?

THANKS!

(JavaScript must be enabled to view this email address)
January 09, 2009

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

Kirk Franklin
January 31, 2009

You can use ExpressionEngine and PHP code with the Fresh Variables module, which also works across multiple ExpressionEngine sites.

(JavaScript must be enabled to view this email address)
February 02, 2009

@Kirk I hadn’t heard of that module before. In what instances do you find it useful?

(JavaScript must be enabled to view this email address)
June 26, 2009

Even im using Modx and and my question is same that how can i use fresh variables on my templates.