Creating Channel for Moving a Website to ExpressionEngine

Exclusive offer: get 50% off this eBook here
Building Websites with ExpressionEngine 2

Building Websites with ExpressionEngine 2 — Save 50%

A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere

$26.99    $13.50
by Leonard Murphy | September 2010 | MySQL Content Management PHP

The vast majority of a website is content, and ExpressionEngine makes it easy to create and maintain such content. In this two-part article series we will create an actual website and learn how to use channels and templates to display our content.

In this article by Leonard Murphy, author of Building Websites with Expression Engine 2.X, you will take an existing website that was written outside of ExpressionEngine and adapt it to ExpressionEngine. As part of this transition, you will be creating your own channel with fields customized to the content that you will be displaying.

 

Building Websites with ExpressionEngine 2

Building Websites with ExpressionEngine 2

A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere

  • Learn all the key concepts and terminology of ExpressionEngine: channels, templates, snippets, and more
  • Use RSS to make your content available in news readers including Google Reader, Outlook, and Thunderbird
  • Manage your ExpressionEngine website, including backups, restores, and version updates
  • Written in an easy-to-follow step-by-step style, with plenty of examples and exercises

Read more about this book

(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.

  1. 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.
  2. 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.
  3. 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:

  1. 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.
  2. If each static page has its own look and feel, then keeping each page in a separate template allows more flexibility between pages.
  3. 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:

  1. You can optionally create custom statuses, custom categories, and/or custom fields for your new channel
  2. You have to create the channel that will hold the new content
  3. You have to populate the channel with some content
  4. 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?

Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Read more about this book

(For more resources on ExpressionEngine, see here.)

Creating a custom field group

To create custom fields, you first have to create a custom field group. To do this:

  1. In the control panel, select Admin | Channel Administration | Custom Fields.

  2. Here, you can see the field groups you already have (News and About). Click on Create a New Channel Field Group, which is located on the right above the list of existing field groups.

  3. Next, you will be prompted for a Field Group name. Use the name website since these fields will be used for managing the static website content. Type this in and select Submit.

Now that you have created your new field group, you should see it under the list of Custom Channel Fields.

Creating your first custom field

Now that you have a field group, the next step is to create custom fields in that group. Start by creating a custom field to hold the image.

  1. From the Custom Channel Fields screen, select Add/Edit Custom Fields for the website group.
  2. You will now see a screen that says you have no custom fields. Click the button that says Create a New Custom Field on the right.

  3. The Field Type that you should use for this is File, as this will provide a way to easily upload new image files (or select a previously uploaded image file).

    There are nine available field types included with ExpressionEngine:
    Checkboxes, Multi Select, Radio Buttons, and Select Dropdown: These allow you to set one or more pre-defined options that can then be selected on the Publish page. This can be useful if you want to restrict what can be entered into the field. For example, a book review website might rate each book that it reviews out of 5 stars. Within the channel, a select dropdown for rating could be defined with options such as 1 star, 1 ½ stars, 2 stars, and so on. When a new book review is being posted, the author of the entry selects how many stars to rate the book from a drop-down box. Then, in the template, since you know in advance what the possible values of the field can be, you can use conditional statements to render the appropriate graphic, based on the selected rating.
    Date: Allows you to define the field as a date (with a calendar date-picker).
    File: Allows you to define the field as a file (with a link to ExpressionEngine's built-in File Manager where you can upload files or pick a file that has already been uploaded).
    Relationship: Allows you to choose another channel, which can be related to this channel so that when you post to this channel, you can include information from the other channel (instead of replicating it). For example, if events in a calendar channel always involve the same meeting rooms, you can have information about the meeting rooms stored in a separate channel, and then when creating a new event in the calendar channel, you would simply have to pick the appropriate meeting room from the meeting room channel for the meeting room information to populate in your event for you.
    Text Input: Allows you to enter a single-line of text. This is appropriate for headings or URLs (for example) where you would not want multiple paragraphs of text.
    Textarea: Similar to Text Input; however, with Textarea, you can enter multiple paragraphs of text.

  4. The Field Label is the name that people see on the Publish page. Label this field as Image.
  5. The Field Name is how you will be referencing the field in your templates. The Field Name, therefore, cannot contain spaces. Name this field website_image.

    Notice how the field name is made up of two parts, namely, the field group name and the field name, separated by an underscore. Why? Field names have to be unique across all field groups. If you precede each field name with the field group name, you can have the same field name in more than one field group. This convention has the added benefit that you are unlikely to use a reserved word for a field name. (For a list of reserved words, visit http://expressionengine.com/user_guide/cp/reserved_words.html).

  6. The Field Instructions is an optional field where you can write some text to guide people who will be publishing content as to what the field should contain. In this case, since this is an image field, you can let people know what the maximum image size should be so that it fits in the space available (in this case, no bigger than 200x200 pixels).

  7. Is this a required field? should be set to No (as some of the pages on Ed & Eg's website do not have images on them).
  8. Since this field is a file field, do not make the field searchable. If you said yes to this option, the content of this field could be searched through the builtin ExpressionEngine search functionality. This makes sense when the field contains text, but not when it contains a file path like this one will.
  9. Show this field by default should be set to Yes. This means that you can enter data into the field on the Publish page without having any additional clicks. You might want to say no to this if, most of the time, you would not expect data to be entered into the field and you want to keep the Publish page relatively uncluttered.
  10. Do not alter the Field Display Order; this determines the order of fields on the Publish page. Since you are adding the fields in the order you want them to be displayed on the Publish page, this number will be correct. However, if, say, you forgot to add a field, you could manipulate this field so that the new field appears further up the Publish page (rather than at the bottom). This setting only affects the display order of the fields on the Publish page. It has nothing to do with the display order of the fields on your website (which is controlled entirely in the templates).
  11. Since this field should only be used to display images, set the File Type to Image.

  12. Once you are happy with all the settings, click on Submit. You will be returned to the Custom Fields page where you can now see your new field listed.

If you get a message that says that there are currently no upload directories available, you must create an upload directory before the File field can be added. Essentially, this means that ExpressionEngine needs at least one directory on your website where uploaded images can be stored. To create a new upload directory, you must first create the directory on your website (or use /images/uploads/). Go to Content | File Manager, and then click on Create New Upload Destination on the right-hand side to define where this directory is located. This error only comes up if you are starting with a blank installation.

Creating your second custom field

You have now created a custom field for your image. There is one more field to add though—a text area field for the body of your content.

  1. Click the button that says Create a New Custom Field
  2. Select a Field Type of Textarea. The Field Label should be Content and the Field Name should be website_content. Since this field is fairly selfexplanatory, there is no need to add any Field Instructions.
  3. The required field question should be set to Yes, and this time, the field can be searchable since it will contain text. Do show this field by default and leave the Field Display Order as it is.
  4. You now have some options that are unique to text fields. The Textarea Rows allows you to choose how many rows the text area has on the Publish screen. (The more the rows, the less you have to scroll if you have a lot of content). In this case, since some pages on Ed & Eg's website have several paragraphs of text, set this to 12.
  5. The Default Text Formatting for This Field allows you to define how you want the text formatted. Leave this as XHTML and set Allow override on publish page to No. This means that whatever text is typed into this field will be formatted before it reaches your template (including the addition of paragraph tags). This is fine as long as you remember this when coding your template (because if you also put paragraph tags in the template, it could double up the paragraph tags and create extra whitespace).

For a complete list of modifications that the XHTML option makes, refer to http://expressionengine.com/user_guide/general/text_formatting.html

Auto <br /> inserts a line break after every line in your entry, but does not insert any other XHTML. This is useful when you want there to be a blank line between paragraphs, but do not want the field to be wrapped in paragraph tags.
None means that no formatting is applied to the data in the field. Whatever you submit in your field will be treated as one continuous block of text. This comes in most handy when dealing with a single line of text (for example, for a heading or image caption) where you would want to handle all the formatting in the template.
Not allowing overriding on the Publish page means that the option to switch back to none or <br /> is not displayed on the Publish screen where someone might accidentally select it.

  1. Leave the Text Direction as Left to Right (this option exists for websites whose content are in a language that is written from right to left).
  2. Leave the Show Smileys and Show Glossary set to No. Smileys provide a link on the Publish page for you to insert smileys into the text area and the glossary provides HTML shortcuts on the Publish page. Since the main content of a website is unlikely to include smileys, and since Ed & Eg are not familiar with using HTML, you do not need either of these.
  3. Set the Show Formatting Buttons, Show Spell Check, and Show Writemode options to Yes. The Formatting Buttons option provides a quick way to insert the HTML for bold or italicized text (commonly needed), spell check is always useful to have and Writemode allows fullscreen editing (especially useful, given that some of Ed & Eg's pages are fairly lengthy).
  4. Finally, set the Show File Chooser as Yes. The File Chooser provides a link to upload files and images. This could come in handy if, say, Ed & Eg wanted to include a second image within their page content (for example). The File Chooser provides a way to upload files (or pick previously uploaded files) and then embed a link within the text area.
  5. The main difference between uploading an image using the File Chooser for a text area and uploading an image using a dedicated File field is how the image is rendered. With a dedicated File field, Ed & Eg never have to see the <img> tag—the display of the image is handled entirely within the template. With the File Chooser, Ed & Eg must place the resultant <img> tag within their content.

  6. Click Submit to save the second field.

Your custom fields are now built!

Next, you need to create the channel that will hold the content.

Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Read more about this book

(For more resources on ExpressionEngine, see here.)

Creating a new channel

Whenever you take on a new task in ExpressionEngine, you usually need a channel. A channel can be thought of as a place to store content (as opposed to a template, which defines how and where the content is displayed). Most tasks in ExpressionEngine involve content, and in this case, the content is the text of Ed & Eg's static website pages.

It's easy to create a new channel:

  1. In the control panel, select Admin | Channel Administration | Channels from the top menu.

  2. Select Create a New Channel (on the right-hand side, above the list of existing channels).

  3. Now you need to choose a Full Channel Name and a Channel Name. The full name is used within the control panel to refer to the channel; the name is used in templates to reference the channel content. Choose Website for the full name and website for the channel name.
  4. Select to not duplicate an existing channel's preferences. However, say Yes to editing the group preferences (this is where you can define which status, category, and/or field group you wish to use).

  5. Under Edit Group Preferences, leave the Category Group as None, set the Status Group to Statuses, and set the Field Group to website (the field group you just created).

    If you do not select a status group at all, only SuperAdmins can publish open entries to a channel.

  6. Finally, do not create new templates for the channel. If you do duplicate an existing group, your new template group will be populated with copies of all the templates from the copied group. This can be handy if all your template groups follow a similar structure. For now, since this is not currently the case, not duplicating a template group is best.

  7. Click Submit to create your channel.

That's it! Your channel has been created.

Creating the content for our channel

Before you start building your templates, it helps to have some content in the new channel. Make your first entry the content of Ed & Eg's index.html page:

  1. In the control panel, click on Content | Publish and then select the website channel. (If the website channel was your first, then clicking Content | Publish will automatically take you to the publish page for the website channel).
  2. You can see that the Publish page looks different than it did for the News channel. There is still a Title and a URL Title, but instead of the Body, Extended text, and News Image, you can now see your custom fields instead (Image and Content). Since you are populating this entry with the content from index.html, open index.html in your browser.
  3. If you have not already done so, the Ed & Eg website can be downloaded from either http://www.packtpub.com/support or http://www.leonardmurphy.com/book2/. The website can be extracted to any directory on your computer, where you should then be able to open the files.

  4. The title of index.html is Welcome to our Website. Leave the URL Title as welcome_to_our_website (you will be using this URL title in the template).

  5. Under Image, select Add File. Browse to the images sub-directory inside your extracted Ed & Eg directory and select money.jpg. Change your upload directory to the Main Upload Directory and click on Upload. (If you only have one upload directory, you will not be prompted to choose one).

  6. Click on Return to Publish and you should see a thumbnail of the image on the Publish screen. Notice that the instruction saying that images should be no bigger than 200x200 is what you typed in when creating the custom field.

  7. The rest of the content can be copied directly from your browser into the Content field. You do not need to copy the HTML tags that are in the source file as ExpressionEngine XHTML formatting will automatically identify paragraphs.

  8. Notice how, on the static page, the Ed & Eg in the first line is bolded. To accomplish this in ExpressionEngine, highlight the words you want to make bold and then click on the B button above the field on the left. This will insert the HTML tags for bold (<strong></strong>) around the word.

  9. Next, wrap the two headings (Introducing Edward and Introducing Egbert) in <h2></h2> tags. (ExpressionEngine formatting does not automatically identify headings). The final content should look as it does in the following image:

  10. Click on Submit to save your entry and you are done!

Summary

You have now entered the content of Ed & Eg's home page into your channel but it is not yet visible on your website. This is because everything on your ExpressionEngine-powered website has to be in a template in order to appear on your website. Therefore, the next step in this process is to create the templates that will show your channel content.


Further resources on this subject:


About the Author :


Leonard Murphy

Leonard Murphy was one of the earliest adopters of ExpressionEngine when it was first released in 2004, and was the author of a series of free tutorials that helped other new users to see what ExpressionEngine had to offer. The tutorials were a hit, and over the years, ExpressionEngine became more and more popular, so in 2008 Leonard expanded his tutorials into the first edition of Building Websites with ExpressionEngine. Two years later, with the release of ExpressionEngine 2, Leonard is back with a completely revised new edition.

Leonard started his career in the UK, graduating from the University of Wales, Aberystwyth. In 2004, he moved to the United States and currently works for Summit Credit Union (a not-for-profit financial institution headquartered in Madison, Wisconsin). He also provides consulting and technical support for small business websites.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Object-Oriented Programming in ColdFusion
Object-Oriented Programming in ColdFusion

High Availability MySQL Cookbook
High Availability MySQL Cookbook

Drupal 7
Drupal 7

ColdFusion 9 Developer Tutorial
ColdFusion 9 Developer Tutorial

CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Joomla! 1.5 Top Extensions Cookbook
Joomla! 1.5 Top Extensions Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software