(For more resources on ExpressionEngine, see here.)
Creating templates
To start with, build two templates: one for the CSS stylesheet and one that contains the HTML that defines the page structure and brings in your channel content. Since the CSS template will be used all over your website, it makes sense to put this in a separate template group called includes (which you will create).
For the page itself, use the index template in the site template group.
- In the control panel, click on Design | Templates | Template Manager from the top menu. Then select the New Group button, located above the list of existing template groups.
- Call the new template group includes. Do not duplicate a group and do not make the index template your site’s home page. Click Submit.
- Back on the Template Management screen, make sure the includes template group is selected, and then click on New Template.
- Call the new template site_css and select a Template Type of CSS. Leave the radio button checked to create an empty template and click Create and Edit.
- From the Ed & Eg site that you downloaded and extracted earlier, open style.css in a text editor such as Notepad. Copy and paste the entire file into the includes/site_css template and click on Update.
- Within the stylesheet, there are several references to images in the image directory. For the style to render properly, you will also need to upload all the images in the /images sub-directory (including money.jpg) to the /images sub-directory on your website.
- After uploading all the images, you will also need to update the paths in the stylesheet to point to this sub-directory. Within the site_css template, wherever you see url(images/imgxx.jpg), change it so that it reads url(http://localhost/images/imgxx.jpg) (replacing http://localhost/ with your website domain if you are not using a localhost environment). There should be 10 replacements in total (one for each image). When you are done, click on Update and Finished.
- Next, on the Template Management screen, highlight the site template group and then select the index template.
- Delete everything currently in the template.
- Open index.html of the static Ed & Eg website in a text editor such as Notepad. Copy and paste the entire source code into the template.
- Since the stylesheet is no longer located in style.css, this path needs to be updated. To do this, use the ExpressionEngine stylesheet variable to indicate the includes template group followed by the site_css template that the CSS stylesheet is in. Change the line:
<link href="style.css" rel="stylesheet" type="text/css"
media="screen" />to read:
<link href="{stylesheet=includes/site_css}" rel="stylesheet"
type="text/css" media="screen" /> - Finally, click Update to save the template and browse to http://localhost/site to view the output of the template as it stands right now. It should look identical to the static index.html page (except that in ExpressionEngine, none of the links will work because you have only created one page so far).
If you do not have such a template group and template then go ahead and create it now.
If you did not hide your index.php file as part of installing ExpressionEngine, remember that your ExpressionEngine URLs will include the additional index.php (for example, http://localhost/site will become http://localhost/index.php/site for you).
Did you spot the deliberate mistake? Although, at this point, everything looks good, the content being displayed in this URL is not from your channel at all, but is what you copied and pasted from the index.html file into your site/index template. The next step is to replace this static content with the content from the website channel.
Pointing your template to your channel
Pointing your template to use your channel content is the step that links together everything you have done so far (creating custom fields, creating the channel, publishing content to the channel, and creating templates).
- In the control panel, click on Design | Templates | Template Manager from the top menu. Then select the site template group and click to edit the index template.
- Delete all the code from after the <div id=”content”> tag to the closing </div> tag (leave these two tags in place though).
- Underneath the <div id=”content”> line, add the following. This code says that you would like to display content from the website channel (but only one entry and only the entry with a URL title of welcome_to_our_website).
{exp:channel:entries channel="website" limit="1" url_
title="welcome_to_our_website"} - Next, add the following line. This says that you no longer want content from the website channel.
{/exp:channel:entries}
- In between the opening {exp:channel:entries} and closing {/exp:channel:entries} tags, add the following code. This displays the title from your entry as an <h1> header.
<h1>{title}</h1>
- Underneath the title, add the following code to place the image from your channel entry onto the page. The {if website_image} statement means that if there is no image defined in the channel entry, do not display the img code at all.
{if website_image}<img src="{website_image}"
class="left" />{/if} - Finally, add the following tag to display the content of your content field:
{website_content}
- The content section should now look like:
<div id="content">
{exp:channel:entries channel="website" limit="1" url_
title="welcome_to_our_website"}
<h1>{title}</h1>
{if website_image}<img src="{website_image}"
class="left" />{/if}
{website_content}
{/exp:channel:entries}
</div>
<!-- end #content --> - Finally, update the page title to reflect the entry title. To do this, replace the line <title> Ed & Eg Financial Advisors </title> with the following code. Although it looks complicated, it’s actually the same as the }exp:channel:entries} code in the steps above, except that all you are displaying is the {title} field and not any of the other custom fields you created.
By default, the {exp:channel:entries} tag requests a lot of information from your database, which can increase the amount of time it takes to display your page. Since you are only displaying one field, the disable parameter tells ExpressionEngine not to request other information you know you do not need (including the data in your custom fields). For more information on this parameter, you can visit http://expressionengine.com/user_guide/modules/channel/parameters.html#par_disable
<title>{exp:channel:entries channel="website" limit="1"
url_title="welcome_to_our_website" disable="categories|category_
fields|custom_fields|member_data|pagination"}{title}{/
exp:channel:entries} - Ed & Eg Financial Advisors</title> - Click Update to save your changes and then browse to http://localhost/site to view your updated website. If everything is well, then you should not notice much difference at all, but behind the scenes, your content is now coming from your channel entry, rather than being part of your template.
