FortySeven Media

Jonathan Longnecker

Jonathan Longnecker

December 23, 2008

Tutorials ExpressionEngine

How We Use ExpressionEngine: Templates and Global Variables

Template Area in EEContinuing 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 VariablesRecently 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 the Love

FortySeven Media
Did you know?

Besides designing websites, FortySeven Media also makes the Kick Awesome Show and is currently working on Kicktastic - a project to tell you how we’re making more money. Sign up if you’re interested.

Comments

  1. 1

    Jez

    Dec 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 wink

    Nice site BTW smile

    Quote Reply

  2. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Dec 30, 2008

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

    Quote Reply

  3. 3

    .(JavaScript must be enabled to view this email address)

    Jan 02, 2009

    So why/when global variables and not embeds?

    Best wishes
    Lee

    Quote Reply

  4. {screen_name}

    .(JavaScript must be enabled to view this email address)

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

    Quote Reply

  5. 5

    .(JavaScript must be enabled to view this email address)

    Jan 03, 2009

    Thanks Jonathan.

    Quote Reply

  6. 6

    Richard Angstmann

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

    Quote Reply

  7. 7

    .(JavaScript must be enabled to view this email address)

    Jan 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 -

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

    Quote Reply

  8. {screen_name}

    .(JavaScript must be enabled to view this email address)

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

    Quote Reply

  9. 9

    Kirk Franklin

    Jan 31, 2009

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

    Quote Reply

  10. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Feb 02, 2009

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

    Quote Reply

  11. 11

    .(JavaScript must be enabled to view this email address)

    Jun 26, 2009

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

    Quote Reply

  12. 12

    .(JavaScript must be enabled to view this email address)

    Nov 11, 2009

    This is backwards to good templating practice.  Isn’t there a way to create a single html wrapper template with a variable that it uses to embed content?  The thinking is that the pages should have have to repeat any wrapper code or variable calls out.  I’m thinking this could be done via URI segments.  Thoughts?

    Quote Reply

  13. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Nov 11, 2009

    @Trenchard Sorry, I’m not really following what you’re trying to do. A better explanation, perhaps?

    Quote Reply

  14. 14

    .(JavaScript must be enabled to view this email address)

    Nov 11, 2009

    I’m simply referring to the most common templating design pattern.  A page constructor is called with an array of variables.  Using these variables, the proper templates are processed and built.  This is how we build pages in CodeIgniter so I assume there is a way to do it in EE.

    The value is that you have a single place to maintain core layout and html tags.

    I was referred to http://jambor-ee.com/tutorials/construct-this/ as a possible pattern.  This is probably tending toward form over function and could seriously impede performance.

    I’d love to get your impression on this.

    Quote Reply

  15. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Nov 11, 2009

    @Trenchard thanks, that makes more sense. I think the core difference is that we’re not programmers and don’t think like that.

    You can definitely set it up that way, but the beauty of EE is that you can use it in whatever way makes the most sense to you. It’s much easier for us to visually see the parts of our html “minimized” than a maze of embeds and variables. Though once you have that setup I can see how it would be easy to manage.

    The way we’re currently doing it was actually based on how the ExpressionEngine guys were doing it when they built their new sites. And currently we’re starting to use Structure so most of our content is being run off a single template anyway.

    I could see how the Jamboree version might be processor intensive, but as you can see, it’s easy to setup your own variables and pass through to embeds. This current setup is working great for us right now, but we are always looking for ways to be more efficient, so thanks for brining this up. I can see the benefits for a large site indeed.

    Quote Reply

  16. 16

    .(JavaScript must be enabled to view this email address)

    Nov 11, 2009

    Thanks for your thoughts.  That makes sense.  So Structure works like the pattern I described?

    Quote Reply

  17. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Nov 11, 2009

    Kind of. It has title trail, navigation and breadcrumb tags so based on the URI it will fill all that in and highlight navigation on the fly. Then you use a single weblog for the actual content. It does much more than that, but it’s really a break from the usual template_group/template structure that most EE people have been using for a long time. We’re definitely digging the efficiency.

    Quote Reply

  18. 18

    Oubai

    Dec 15, 2010

    Hi Jonathan,
    Thanks for post. Would you please help me and tell me why when I try to embed a template, the statement {embed = “mytemplategroup/templatename”} gets printed on the site instead of including the template.

    Thanks,
    Oubai

    Quote Reply

  19. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Dec 15, 2010

    @Oubai Depends; can you give some more information about what you’re trying to do? If you’re literally pasting the above code you’ll need to replace those with your template group name and template name. Also, you can’t embed templates in Global Variables. I’m also assuming you’re using ExpressionEngine, correct? Embedding is pretty straightforward so I’m not sure why you’re having trouble.

    Quote Reply

  20. 20

    .(JavaScript must be enabled to view this email address)

    Dec 18, 2010

    Hello Jonathan,
    Thanks for the reply buddy. Finally, it worked.

    Of course, I’m using EE 2.0 and the problem was because I was putting a space before and after the “=” sign, and now it works fine.

    I have long experience in all kinds of CMS’s, but a newbee to EE; however, I could figure it out fast because I worked on similar system called TYPO3.

    Thanks,
    Oubai

    Quote Reply

Leave Your Thoughts Behind

Remember my personal information