(For more resources on ExpressionEngine, see here.)
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.
There are three basic ways in which you could approach converting this site into ExpressionEngine.
The last option, leaving the content of each page in a template, is actually a good approach in certain circumstances:
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.
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:
Let’s begin!
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.
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.
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?
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…