Creating and Organizing Templates in our ExpressionEngine Site

In the past month, I’ve detailed the process behind the setup of a new ExpressionEngine site.  The site being created in this series of articles is actually going to be a live, working website- BabyFilter.com.  The site exists already, but has languished in website limbo for a few years.  Rather than just starting another marketing effort to try and revive it, I am first giving it a well-deserved upgrade to run on ExpressionEngine.  This will allow for more robust member management, better site security, and lots of pre-built site management tools for me, the site administrator.

Our focus to this point has been installing ExpressionEngine, creating a blank slate, and choosing our settings and creating our weblogs.  We watched our staging site go from an empty file system, to the default ExpressionEngine weblog template, to nothing but a blank page.

If we were building a house, we’d have the foundation laid and we’d be stacking up the lumber to build the framing.  I’m talking about ExpressionEngine templates.  I laid out our basic site architecture in part 2, and here is where that begins to take shape.

We’re going to be working in the Templates tab of the Control Panel (CP).  In here we can create our template groups and individual templates.  Think of these as folders and files when referencing the site URL structure.  So, when I create a template group called “topics”, and then create templates in that group called “index” and “view”, you’ll be able to access them on the staging server like so:

babyfilter.wi-staging.com/topics (or babyfilter.wi-staging.com/topics/index)
babyfilter.wi-staging.com/topics/view

And by adding a specific topic to the view template’s URL, we’ll end up with a single entry page like so:

babyfilter.wi-staging.com/topics/view/my_sample_topic

Nice clean URLs, easy on the eyes for both your users and the search engines.  Let’s setup these templates, and the others we will need to create our site structure.  In the Templates tab, click the big green button labeled Create a New Template Group.  We don’t want to duplicate another template group (there aren’t any yet, anyway), and we don’t want the Topics index template to be the home page.  Click Submit and you’ll see your new template group, as well as a detailed Templates page in the CP. I always keep the template group names all lowercase for consistency.

Let’s create the other template groups we will need before we go any farther.  Repeat the above process for template groups called faq, includes, modules, about, search, contact, and rss.  Finally, create one more template group called “home”.  In this case, check the box to make the group’s index page the site homepage.  Once you do that, you’ll notice that the “home” template group has a different color and an asterisk beside it in the list of groups to denote it as the template group where the homepage lives.  This may seem obvious with the name of the group, but you could just as easily have one template group called “content” with a bunch of different templates in it, including the homepage “index” template.  In this case, the “content” template group would have the denotation. 

I like to have my groups in alphabetical order, so if you like that as well, you can click the Edit Group Order link in the upper right and then click the big green button to re-order the groups.  So, here is our full list of template groups:

The groups called “about”, “contact”, “faq”, “home”, and “rss” will contain but a single index template, meaning that we’ll end up with some nice URLs for accessing the About Us, Contact, FAQ, Home and RSS pages (e.g. babyfilter.wi-staging.com/contact).  The “includes” group will hold our site header and footer templates.  The “modules” group will contain smaller pieces of modular content that we can embed in other pages throughout the site.  The “search” group will hold our search results template as well as an advanced search template.  Finally, “topics” will contain various pages that will showcase the topical content created by our site members.

So, we’ve been doing all this setup- let’s see some results.  Click the “home” template group, and notice that the “index” template is already listed on the right hand side.  Anytime you create a template group, the group’s default template is automatically created for you, and it is always called “index”.  In this case, the red asterisk denotes that this is the site’s home page template.  Whatever we put in this template will show up on the homepage.  Recall that in part two I said that:

The templates contain all the XHTML, CSS, JavaScript and ExpressionEngine tags that display your site.  They work just like a typical hierarchical website structure of folders and files.  So, if there are no template groups and templates, there is no code.

With this knowledge in hand, let’s get some content up on the site.  Click the “index” template on the right hand site of the page and you’ll see a blank textarea.  This is the CP’s text editor.  Yes, you can write all the HTML, CSS and other code you want, right here in the CP.  Go ahead and enter this simple code:

And click Update.  Then, click the big green button again - this time it says View Rendered Template.  It will load up this template’s actual page on the staging site, and you’ll see

Seriously!  That’s all you need to do to publish static HTML in ExpressionEngine!  But, wait a minute, you say?  Why did it take us four articles to get to Hello World!?  Well, you certainly could install ExpressionEngine and proceed directly to the Templates tab to create your content, but as I have stated, this is the workflow that works best for me when assembling a site.  I prefer to have all the settings in place before I start production of templates and writing code. 

So, back to editing templates.  I know your next question - how could you possibly give up your favorite text/HTML editor for a simple textarea in the CP to edit your site templates?  You don’t have to.  Follow along as I setup ExpressionEngine to save our templates as files.  This will allow editing on your local machine, or directly through FTP if you prefer.

Return to the Templates tab and click Global Template Preferences.  Next to Allow Templates to be Saved as Files?, select Yes, and next to Basepath to Template File Directory, enter the basepath to your system templates folder.  The templates folder is located at /system_bf/templates/ in our case.  So for BabyFilter, the entire basepath is /home/webincep/public_html/babyfilter/system_bf/templates/.  If you don’t know your basepath, simply go to the Admin tab > System Preferences > General Configuration > Theme Folder Path and copy that path without the /themes/ at the end.  Keep in mind that each server/host will have a different file and folder structure, so yours may be totally different.  Click Update and you are done.

Next, we need to verify that the folder we referenced above is writeable.  So fire up your FTP program and navigate to /system_bf/templates and set it to 777.  Now, return to the templates tab.  We need to tell ExpressionEngine to save each and every template as a file, and to use the file based version of the template when rendering site pages.  Starting at the top of the template groups, select the “about” group, then click the “index” template on the right.  You’ll see that large textarea again, but this time, just above the Update button, you’ll see a checkbox to save this template as a file.  Check the box and click Update and Finished to return to the Templates tab. 

Repeat this process for every template within every group we have created (except includes and modules, we won’t use the index templates for those groups).  Yes, I know its repetitive. Now head back to your FTP program, dive into that Templates folder, and you should see a folder for each template group you created, and within each folder, a file named to correspond with each template you created in the CP (just index.php for each group at this point).  Jump back up to the Templates folder in FTP and download the entire folder.  You should now have all the templates and groups in your local file system.

As a TextMate user on a Mac, I can now open the babyfilter.com folder that I created when I setup the ExpressionEngine installation in TextMate by dragging the folder to a new project in TextMate.  Now I have the entire ExpressionEngine installation, and the templates I just downloaded together for editing as needed.  And as I create more templates, I can save them as a file, download them via FTP, and edit them in TextMate in just a few seconds.  Making fast changes to the site is easy as well, in TextMate I simply make the edits, CMD+S to save and CMD+E to upload via Transmit (your applications and FTP methods may vary).  ExpressionEngine will reference the file version of the template, rather than the version that it allows you to edit in the CP.

Let’s test that theory out.  If everything worked as expected, when I open my new local version of the /home/index template, it should have my skeleton Hello World! Code on it. 

And it does!

I’ll quickly change the text on it to “ExpressionEngine Rocks!”, then save, then upload, and then refresh the staging site homepage.  Worked like a charm.  This works with each and every template that you save as a file and download to your local machine.  You should now understand pretty well how ExpressionEngine allows you to setup templates in the CP and then edit them locally in your favorite HTML editor.

This has gotten pretty verbose - so I think we’ll leave it at that for this installment.  Next time we’ll create our common site header and footer, talk about embeds and get our first taste of plugging in some dynamic ExpressionEngine code.  Don’t forget to check out our staging site.  It speaks the truth!

Series Introduction
Next Article in Series
Previous Article in Series