This is the second installment in a series covering one way to go about building a small business type website in ExpressionEngine.  In the first chapter we downloaded a free site template, uploaded the images to an EE site, modified the image paths in the CSS and HTML files, and finished by getting EE to serve up the static template.

In this chapter we start what I’ve been calling the “chunking up” of the template, where we take chunks of the HTML code from the master template, save them off as embedded EE templates, and add the embed code back to the master EE template.

Why Embedded Templates?
For those new to ExpressionEngine and embedding templates, you might first want to peruse the help docs - although that page doesn’t talk much about the benefits of embedding templates.  The overall goal of the chunking up process is to only store common/reusable elements in one place in EE - both for ease of constructing the site and ease of future changes or maintenance.  This way when you want to add a new section to your site and need add it to the main navigation, you only need make that change in one EE template.  Since that template is embedded into the rest of the site, your change is immediately reflected across the entire site.  If you have experience with server includes, it’s a very similar design approach.

What to Embed?
Before delving into the code, though, we should step back and take a look at the current page and what we’re intending to do.  Sometimes I can get carried away with the chunking up and end up with a site that’s more complex than it needs to be.  The big question is what elements (both from a visual and coding perspective) would benefit from being embedded?  Starting visually, the obvious candidates are anything that’s sure to be repeated as we move through the site:

• The company name / logo
• The main navigation
• The search box
• The footer

We can add the Latest News and Latest Products blocks to that list—as we can then promote them on multiple pages throughout the site.  The Register Now box is interesting - but the way it’s positioned in the middle of other content will make it difficult to embed.  For now we’ll just leave that one be and come back to it later.

Looking at the source code on the HTML, we’ll also grab the HTML header including meta tags, the link to the styesheet, and page title.  I know—the page title needs to be different with each page - in a future chapter I’ll show you how to keep the page title stored in the embedded template but also have each page get a unique title.

Chunking Plan
So here then is a screenshot of the HTML, marked up to show our “chunking plan” visually, along with the name for each embedded template.  Click the smaller image for a large one (it’ll open in a new window) - just be forewarned it’s about 1MB:

You’ll note the large amount of content that isn’t being pulled out and embedded.  That’s the core content of the page, and —in the next chapter of this series - will get pulled out of the template and stored in a EE weblog.  Also note - I’m sure different EE developers do this differently.  I prefer to keep the skeleton of the page’s essential structure in the parent template.  I don’t like having divs getting opened in one template in closed in another as it has made it hard to track down mis-matches or validation errors.

Create a New Template Group
I like to keep all my embedded templates in their own group, so that my main groups hold the parent templates.  Here are the steps:

• Enter the EE Control Panel
• Click the “Templates” tab
• Click the “Create a New Template Group” button on the upper right portion of the screen
• Choose a name.  I’ve called mine “building_series_embeds”.
• Click Submit

On to the Chunking!
I like to do this step incrementally - so my basic workflow is:

• With the full index template open, copy the section of code I want to embed.
• Create a new template in my “building_series_embeds” group.
• Choose the empty template option, name it, and click Submit.
• Click on the new template title to edit it.
• Paste in the section of code.
• Adjust any formatting.
• Click Update.
• Don’t leave this screen just yet - up in the title area just over the editable text area EE provides the name of the template along with the template group name - for example; “building_series_embeds/html_header”.
• Select and copy this to the clipboard.
• Return to the parent template in the editing interface.
• Select the same portion of code that you copied earlier.
• Do a Paste, so that chunk of code is replaced with the name and template group of your new embedded template - again the example “building_series_embeds/html_header”.
• Add the EE embedding code, so “building_series_embeds/html_header” becomes {embed = “building_series_embeds/html_header"} (Note - remove the spaces around the equals sign, and ensure - if you copy and paste from this page - to replace the quote marks).
• Save the parent template.
• View the parent template to ensure that it remains unchanged visually. Sometimes I’ve grabbed one line of code too many or too little and this is where I catch those mistakes.
• Repeat the above process for each section of code in the chunking plan graphic.

The Results
OK - I’ve moved through and completed the above process for this template. Visually, the rendered page looks exactly the same.  Viewing the source code you’ll see that there are changes in the spacing and tabbing of the rendered code as I’ve tweaked each embedded template as I went along.  I also added in some HTML comments to help asscociate closing div tags with their opening partners. 

The most satisfaction from this chapter is looking at how the embedding process has really simplified the parent template.  Here is a text version of the template after completing this Chapter: chapter_2_index.txt.

Next Steps
In Chapter 3 we’ll at least begin the process of moving through the static content contained in our templates, implementing weblogs to store that content (so that it can be edited in a weblog entry rather than having to go into the template code), then edit each template to add the necessary EE code to pull the content back in from the new weblog entries.

On to Chapter 3.
Back to Chapter 2.