(For more resources on ExpressionEngine, see here.)
Introducing Ed & Eg
Ed & Eg are fictional financial advisors in Anytown, USA. They have a small website written in static HTML/CSS that describes their services and how to get in touch with them.
Their website currently consists of six HTML pages, one CSS styling file, and a handful of images. Although relatively simple, neither Ed nor Eg are familiar with HTML code, so they tend not to update their website.
Although this has been fine for them up to now, they want to start reaching out and interacting with existing and potential customers through their website and they have picked ExpressionEngine for the task. Soon they will see what a good choice they have made!
To download their website, you can either visit http://www.packtpub.com/support and select this book from the drop-down list for the code files, or visit http://www.leonardmurphy.com/book2. Extract the EdEg directory into any directory on your computer. Once extracted, you can view the website by opening the index.html file in your browser.
If the pages appear unstyled, you may not have extracted the files first. Although you can open the individual files from within the compressed directory, they will not be styled and the links will not work.
The website design was adapted from a design called Pluralism from http://www.freecsstemplates.org/. The design itself is released for free under the Creative Commons Attribution License 2.5, and you can download the original design (as well as many other free CSS designs) from their website.
Deciding upon an approach
There are three basic ways in which you could approach converting this site into ExpressionEngine.
- You could use a third-party add-on such as Structure (http://buildwithstructure.com/) that is designed specifically to help maintain static pages in ExpressionEngine. This can be especially useful when dealing with multiple tiers of static content. However, since this is not part of the built-in ExpressionEngine functionality, this article does not use this method.
- You could put the page layout code into templates, but put the main text of each page into a channel and then use the {exp:channel:entries} tag in your templates to display the page content.
- You could put both the page layout code and the main text of each page into templates and not use channels at all.
The last option, leaving the content of each page in a template, is actually a good approach in certain circumstances:
- If there are only a handful of static pages, it might be less work and less complication to keep the static content in templates, rather than creating a channel to hold the content.
- If each static page has its own look and feel, then keeping each page in a separate template allows more flexibility between pages.
- If you are comfortable editing templates whenever you want to change the content of the static pages, then keeping the content in templates will work fine. (However, if you plan to have someone else update the content, having them edit the content in a channel is easier for them and a less risky task for you than letting them edit the template).
Since Ed & Eg’s static pages have a consistent look and feel, and Ed & Eg are not completely comfortable editing HTML themselves, using a channel for the page content is a good solution. With each website page in the current static website as its own channel entry, Ed & Eg will be able to change the wording of a page easily by editing the corresponding entry, while the more complicated HTML that builds the page will be out of their sight.
Note that in this article, we will not be converting the Frequently Asked Questions page.
Designing and building your channel
Creating a new channel for your website involves the same basic steps each time. These steps can be completed in any order and you will often find this to be an iterative process:
- You can optionally create custom statuses, custom categories, and/or custom fields for your new channel
- You have to create the channel that will hold the new content
- You have to populate the channel with some content
- You have to create (or modify) templates that will display the content
Let’s begin!
Custom statuses
Each entry in ExpressionEngine can, by default, be marked as open or closed. An open entry means that the entry is visible on your website, whereas a closed entry means the entry is not visible.
It is possible, however, to create more than these two statuses. You can use custom statuses to separate certain entries from others (such as the Agile Records website uses a custom status of Featured to identify which band to feature on the front-page). You can also use a custom status to build a workflow, for example, a draft custom status to indicate an entry that has been written, but needs someone else to review before being marked as open and appearing on the website.
At this point in the design process, there is no reason for Ed & Eg’s website channel to have custom statuses so the included Statuses status group (which includes open and closed statuses) will suffice.
Categories
Each channel in ExpressionEngine can also be associated with a category group. Once a channel has a category group, each entry in that channel can then be assigned to one or more categories in that group.
Categories provide a natural but powerful way to organize your content, enabling you to group entries that are in the same category together and thereby encourage visitors to click-through to more of your content that interests them. Categories can also be used, such as status groups, to identify certain entries and do something different with them in your templates. The Agile Records example site uses categories to identify Staff Bios in the about channel and display them in their own section on the About page.
For Ed & Eg’s website, there are only a few static pages, so there is no reason to use categories.
Custom fields
As an example, say you have a channel for recipes. You could have a custom field for the description of the dish, a field for the ingredients, a field for the preparation steps, a field for the nutritional information, and an image field for a photo of the finished dish. You can create a field for whatever information you want to store in your channel.
That said, not every channel needs its own set of custom fields. Different channels will often have similar content (for example, an introduction, the content itself, and an image). When this is the case, using the same field group for more than one channel works very well and reduces the amount of administrative overhead.
By default, the blank installation of ExpressionEngine does not include any custom field groups, so at least one must be created in order to build a channel. For Ed & Eg’s website, two custom fields will be ideal—one to contain the text of the page and one for the image that appears at the top left on some pages. Although the picture is a static image of coins right now, creating it as a custom field will give Ed & Eg the flexibility to have a different image on different pages, without having to edit the HTML code.
Do not worry about second-guessing ahead of time all the fields that you might need. While it is true that we may one day need a heading 6 and a text 6, they can always be added when the need arises.
So now that we know what custom fields we want to create, how do we create them?
