Planning Ahead with your ExpressionEngine Templates

Posted April 30, 2011 by Ryan McLaughlin - nonactive Short URL: http://bcw.im/b5a1 Planning Ahead with your ExpressionEngine Templates

Creating building-blocks of elements can save time and headaches later.

When first learning ExpressionEngine, the complete "ground-up" functionality of the template system can be daunting to say the least. What is the best way to organize a site you're building? A lot of websites have unique elements in certain pages or sections, so the old-fashined homepage & subpage template style is fairly lacking. There was always the option of having one template per page, but that kind of defeated the purpose of using templates in the first place. You could always create a bunch of canned layouts for future use, but then dealing with unique IDs and classes for those unique elements was always a pain.

Regardless of how you decided to set up your templates, the main issue was that once you created a site and got it up and running, there would inevitably be some changes from the client in terms of adding new pages, moving sections around, or completely changing the layout of an area. When you end up embedding sections with reckless abandon, those "simple" tweaks from the client can become hairy tangles of embeds that blow through your leftover budget.

So, what's the best way to "future-proof" your template structure so that you can speed up development time, cut down on redundant code, and most importantly, make those later changes without much trouble?

Well, let's look at an example site and dissect its different sections:

Home
Products
- Widgets
  - Blue Widgets
  - Green Widgets
- Thingamajigs
  - Tall thingamajigs
  - Short thingamajigs
- Whirleygigs
  - Cheap
  - Medium
  - Expensive
Services
Company
- About Us
- Our History
- Mission Statement
Support
- Technical
- Sales
Contact

This is a reasonable medium-sized site that might have an array of template designs. Obviously the homepage will probably be unique, the products section might have its own layout, and then finally the rest of the subpages will share a template. For good measure, let's say the Support section runs a forum or something fairly complex.

Obviously the basic two-template layout isn't going to work for this client. What if, down the road, they want to add a new product? Or remove a product category? Or add a blog, and have it integrated into the Support section? If the client has to call you for every little change, that kind of defeats the purpose of spending time developing a CMS.

The right tools for the job

With ExpressionEngine the navigation can be the most difficult part to grasp. If you talk to most EE developers, they will all agree that Structure is a godsend. This add-on (not free, but worth the cost) floats above all the confusing elements of the EE backend and makes it easy for your client (and you!) to get a birds-eye view of the structure of the site.

Basically it lets you organize your site just like the list above, so you can keep track of the different categories you have, and you can also drag and drop elements to re-order them.

One of the most valuable parts of Structure are the navigational tags. Basically with one tag you can have a dynamic navigation that intelligently reflects your site anatomy on every page.

Next up is downloading & installing Switchee. We will be doing a fair amount of conditionals, and you'll see later that if we are just testing one variable, we can use Switchee for less overhead in our code.

Setting up shop

So now that you have Structure configured, and you have some of the templates coded into HTML, it's time to build those templates. Using template groups is a great way to stay organized, but remember that the end-user doesn't see any of your template structure. A lot of times new EE users think they have to mirror their template groups the same way they have their site structure… this is not the case, and will actually make more work harder for you.

Let's start with a group called _inc (the underscore keeps it above all other folders when looking in your FTP client... you are saving your templates as external files, right?). This contains the header, my footer, and the meta tag template. These are things that appear on nearly every page, so we want to manage them separately. This is a good place to put your stylesheet if you plan on running it through EE's native parser.

Next we want to have a different group for each unique area of the site. In our example, these would be home, products, interior, and support. What goes in here? Well, one template for each type of layout in that section. Each folder will have an index file by default, so for home we'll just use that one. In the others, we can use index for the default, and then create others as we see fit. You can also chunk up re-usable parts in a section, say for example a common sidebar on all product pages, into include templates in these folders (it's too bad EE doesn't let you nest template folders).

Lastly, the whole point of this article: shell templates. These are essentially traffic signal templates that run on top of the entire site structure, and dictate which other templates to include. It may sound a little superfluous, but it really shines when section-wide changes need to be made.

Create a template group called _shell, and create one template for each unique section we have. In this case, we mirror the template folder structure with home, products, interior, and support. The code in these templates is short, but here it is:

{embed="_inc/header"}
{exp:switchee variable="{segment_1}"}
     {case value="your_section"}
          {embed="content/your_section"}
     {/case}
     {case value="another"}
               {embed="content/another_section"}
     {/case}
     {case value="last"}
               {embed="content/last_section"}
     {/case}
{/exp:switchee}
{embed="_inc/footer"}

So what's going on here? Well the shell template basically looks at the URL, and dictates what template to serve up. From top to bottom, we are including the header template, then looking at the URL's first segment, and if it matches any of our content pages, it throws that in, and then closes with including the footer. We don't want any content in here at all.

Organizing your channels

The Structure add-on has one important step during setup that ties this all together. You have to define a default template for each section that you add. Normally you have to take a step back and think about this, since it's going to make future changes very difficult. With the shell method, you just slap the corresponding shell template on every associate section. So for all pages that fall under products, they all use _shell/products. Then we can use that shell template to look at the URL and dictate where things need to go. It essentially lets you change your mind about which templates certain sections use, without having to go in and change every single entry. Pretty sweet, right?

Let's use an example. Let's say in our site above, we want to move our Expensive Whirleygigs under Widgets. Normally, since each section has a unique design, we'd have to go under every product one by one and change the associated template. With the shell method, we just update our _shell/products template to go use a different template when a user visits the page, and it's done.

Conclusion & Disclaimer

This obviously isn't a be-all, end-all solution for every EE build. This seems to work best with medium to large clients who have to pass approvals around and around, since that's when a lot of last-minute changes and reorganization happens. Think like your client... to them, asking you days before a launch to move the entire Support section under the Company section doesn't seem like that big of a change ("you just have to update the navigation, right?"), but if you set up your templates in an inflexible way, you are going to have one mess to clean up.

Here's what other people had to say

Emmanuel

May 9, 2011 12:04 pm

Nice points.

Just a question, slightly off the point: what are the pros and cons of running the stylesheet through EE’s parser? I thought I was better of minimizing both the javascript file and the CSS file out of the EE file.

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

May 9, 2011 3:07 pm

Emmanuel, I started typing a response here but it got too lengthy… I went ahead and posted a new article here. Let us know if that helps!

Mike Lohrman

May 11, 2011 11:11 am

I just worked on a site and used Structure for the first time. I’ll keep this in mind for next time, thanks for writing it up!

Adam Hermsdorfer

May 15, 2011 5:21 pm

I havent used Structure yet, but like how it sounds.

Rob Butz

May 17, 2011 11:14 am

I just want to make sure I have something correct to load embedded templates out of this section, the embed tags should read something like


{embed="_shell/your_section"}

not


{embed="content/your_section"}

right?

This is interesting way of doing things. If you have multiple sections with “articles” in each, though, it seems like you can’t really get around using a structure like:

Section 1:
—index template
—story template

Section 2:
—index template
—story template

Section 3:
—index template
—story template

I was hoping to use a technique to get around the need to cut down on templates as sections expand (one site I work on uses 30 sections!) I can see how the embed comes in handy for rapidly changing very similar layouts. But it would be nice not to have 30 story templates at all. I guess, in theory, we could make a “story” template in a section called “articles” and make everything link there, then have some code on the story template so that it “knows” (based on the story category) how to decorate the story template.

Just a point of info: sites start to get sluggish with Embeds. I’ve been using Solspace’s Template Morsels for awhile, but I’ve only just started using one of its features called “Embed Harvest.” Between the two, I’m able to get rid of almost all regular embeds and the site speed is much better & hits to the database are fewer.

seo strategy

May 22, 2011 9:03 pm

very good cms solution with a massive list of features. It doesn’t match Wordpress as far as available themes and modules but it has alot of the key options out of the box without the need to installing anything additionally..

GDmac

June 13, 2011 3:31 am

Seeing that you first embed the header in a “shell” template, what solution do you use to set “title” and “meta-description” elements into the header?