Enough toying around, I want to do something good!

Cool it, cowboy (or cowgirl)! Unfortunately we have to do some homework before we can get down to the nitty gritty. By far and away the most common cause for concern when developers pick up ExpressionEngine for the first time is the terminology that EE utilizes to describe its structure and functionality. They're not necessarily confusing, they're just different from pretty much everything else on the market. Once you've got your noggin around the basics, you're well on your way to converting your existing valid xHTML/CSS sites to an ExpressionEngine-friendly design.

The EE Documentation is an invaluable resource. Bookmark and refer to them often!

Weblogs - probably not what you thought they were

If you're already accustomed to other Content Management Systems - notably WordPress and Joomla - chances are you probably think you know what a weblog is. Well sunshine, you're wrong. An ExpressionEngine weblog isn't a description of everything - the information and the pages which that information is displayed on. This is a really important concept to wrap your head around.

An ExpressionEngine 'weblog' simply consists of information. In the same way that you should be separating your content and style with regards to your xHTML and CSS, EE allows you to separate your content (weblogs) from your styling (templates - more on those shortly). You need to think of a weblog as a container for information that is stored in the database that EE uses.

The official documentation conveys it well - so who am I to reinvent the wheel...

Because ExpressionEngine makes no assumptions about the placement or format of a Weblog's content, you can present the content of your Weblogs on your pages in thousands of ways, structured and organized in a way that makes the most sense for your content.

Templates - probably exactly what you thought they were

Templates are ExpressionEngine's way of displaying the data which you've stored in your weblogs. If, for a moment, you think back to the good old days, when the term 'global financial crisis' referred to the 1930's, politicians actually did some useful work and... (I digress...) web pages were static, then you can think of a template as a static html page. Even though ExpressionEngine is a dynamic CMS - there are no static html pages (well, sort of). If you think of a template file as such, you will begin to see the bigger picture.

ExpressionEngine takes care of turning a template into a web page when someone visits your site. A template can contain tags which allow you to 'drag in' content from your weblogs (or elsewhere, if necessary).

Adjust Templates

A huge feature of EE is the fact that you're able to adjust your templates from your control panel. Many CMS's have this ability, but to be frank, the implementation is usuallyawful. EE's way of allowing you to adjust everything with their own custom tags (more on these later) from within the control panel is, quite honestly, awesome. You no longer need to faff around with editing a file, then uploading it using your chosen FTP program, then going to your browser and refreshing to make an amendment. EE's control panel and specifically its "Edit Template" functionality is first class and, I believe, unrivaled. (You are able to save your templates as flat files if you wish to be able to edit them in your chosen editor, coda/dreamweaver etc. - we'll walk you through this process in another tutorial)

Template Groups - Does exactly what it says on the tin

One final point of note with regards to templates: you are able to group them as you see fit. A Template Group is a collection of related templates which you are best thinking of as a folder on your file system. You might have a template group which 'groups' all of your site-wide templates, such as the information in your footer, header and menu. On the most part, these are 'static' files (bare with me here) so you could call your template group 'static_template_files' and store your header, menu and footer templates in that group.

Viewing a template

As you don't actually have any physical web pages on your site, you need to tell EE precisely what you want to look at and then EE will determine what template is shown. If you break it down to its core, you can access a specific page as follows:

http://www.MyWebsite.com/YourSystemFolderName/index.php/template_group_name/template_name/

Pretty straight forward eh? So if you have a template group which is called "Static" and you wish to view your "Footer" template, which is within that group, you would browse to:

http://www.MyWebsite.com/YourSystemFolderName/index.php/Static/Footer/

EE Tags - The magic begins

For the most part, a template file looks like a standard html page. The discerning factor are EE Tags: these let you generate dynamic content within your template files and are the means by which you will be able to utilize all of the amazing features that EE holds within your templates. This section is pretty hard going, please stick with it. Once you have grasped the basics of weblogs, templates, and finally tags, you're well on your way to becoming an ExpressionEngine superstar. Every single ExpressionEngine tag is linked to a module or plugin that allows you to generate or display content.

What does an EE tag look like?

A fine question! The absolute basics are as follows: a tag is surrounded by curly braces - one's that look like this: { ..... } - and typically has three components.

1. The first part tells EE that you are writing a tag
2. The second part is the module that you are referring to
3. The third part is the specific function from within that module that you are using.

A tag looks like this:

{exp:weblog:entries}...content...{/exp:weblog:entries}

This tag tells ExpressionEngine to run the "entries" function which is found in the "weblog" module. Pretty much all tags have three segments such as this, however, now and again there will be plugins which have only two. Just bare that in mind for now.

There are two types of EE tags - single tags and tag pairs. If we follow on our HTML and CSS analogy from earlier, we can think of single tags as self-closing html tags such as an image tag or a horizontal rule. These tags fetch a single piece of information and do not have a closing tag. These sort of tags will be most familiar to WordPress developers as the vast majority of WP code is self-closing 'single' tags.

The other type of EE tags are tag pairs. Again, following on from our earlier analogy, a tag pair is pretty much identical to standard html tags such as the heading, paragraph or div tags - you have an opening tag, content and then a closing tag. Tag pairs are designed to return several pieces of information. The example above is a tag pair - the 'entries' function from within the 'weblog' module is designed to return several entries from your weblog (in fact in its current format it returns all of the information from your weblog - as long as the correct variables are in place) - You'll use this, in one form or another, an awful lot when you create your own templates (and we'll be seeing it later on in this series when we create our own templates).

EE Tag Variables

Most tag pairs will contain variables - you can think of these as a single piece of information being retrieved using the function which is invoked when you opened the tag pair. For those WordPress developers out there, you can think of variables in exactly the same way as they work in WordPress ... you type the variable name and the information that you requested is displayed in your template. The easiest example of this to grasp is by using the weblog:entries function - which we'll use in its most basic form, thus:

{exp:weblog:entries weblog="movies"} 

<h2> {title} </h2> 
{if summary}
  {summary}
{/if}

{body} 

{/exp:weblog:entries}

Here we've introduced a couple of new things - Parameters and Conditional Variables. We'll break down the above code line by line and explain what's going on.

{exp:weblog:entries weblog="movies"}

We've attached a parameter to the end of the opening part of this tag pair. We've told ExpressionEngine to invoke the 'entries' function from the 'weblog' module and then we've told it that we want to load the 'movies' weblog. This means that only the information that is stored in the 'movies' weblog will be displayed between here and the end of the closing tag pair. The 'entries' function (and the weblog module) can take many parameters and you will be using these the most throughout your templates. The official docs for this particular module list all of the available parameters at http://expressionengine.com/docs/modules/weblog/parameters.html and as you can see, you can 'filter' what you want displayed to a huge degree. This page is probably worthy of a bookmark too!

<h2> {title} </h2> 

Now we've chosen our weblog, we can get information from it - here we've told ExpressionEngine to output the titles of the entries we have in the 'movies' weblog. This is an example of how we use a variable.

{if summary}
  {summary}
{/if}

This piece of code, for me and many other developers, highlights one of EE's primary strengths. This is called a Conditional Variable. As you can see we have told EE that if there is a summary for the entry then we should display it. Conditional variables are extremely useful (and are one of the 3 types of variables that are available in EE - the other two being Single Variables and Variable Pairs which we will touch on later in this series).

{body}

This is similar to the {title} variable above - but instead we are outputting the main body of the entry.

{/exp:weblog:entries}

This is the end of our tag pair - notice we don't need to include the parameter, we're just closing off that particular tag - we're telling EE that we no longer wish to be using the entries function in the weblog module.

But where do I do all of this cool stuff?

OK, so now we know what certain aspects of EE code looks like and we have some understanding of the basics behind displaying information that we want. But how do we go about putting this into a real world example? Let's do precisely that. Let's create our own template which displays just the information that we want!

The first stage is to log in to our control panel - we do this by navigating to our system folder. In the first part of this tutorial we renamed the system folder "NotTheSystemFolder" so we need to go to http://www.MyWebsite.com/NotTheSystemFolder/ (or wherever you installed ExpressionEngine in Part 1) - this will bring up the login page. Enter your credentials and you will be at the main 'dashboard'.

Click on "Templates" and you will be presented with the 'Template Management' Page. This particular page is amazingly useful, but at first glance is quite complicated.

On the far left we have the template groups (remember them?) - we currently have *site and search in our list (this is if you haven't made any adjustments to the standard setup). *site is highlighted and we are able to see the currently available templates that are in this 'group' towards the middle of the screen. If you click on "search" in the templates group, the available templates changes. As you have probably guessed, this template group lists all of the templates that are used whenever someone searches for something on our site. The three that are currently used are 'index', 'results' and 'search_css' - clicking on the title of any of these brings up the edit template screen. However, for now, don't do that - we want to go back to the *site template group and look at some of the templates in there - so click on *site and the templates changes back again.

Between the Template Groups list (with *site and search) and the list of Template Name's you will see a column called "site" (as long as you have the *site template group selected) - the menu with "Preferences, New Template, Edit Group, Delete Group and Export Templates" is the one we want ... as we're creating a new template, we naturally, want to click on "New Template"

We need to name our template name - all one word (dashes and underscores are allowed) - we'll call our one "testTemplate" Next you need to select what type of template this is - the drop down box lists several options such as Web Page, RSS Page, CSS Stylesheet, Javascript, Static and XML. Most of these are fairly self-explanatory, but we'll be going through some of these in a later tutorial. For now, we're creating a new web page, so we'll leave it selected as that (it's the default). You are then also give then option to populate your new template with already existing data or one from your library. For clarity, we'll select the default which is "None - create an empty template".

You're now taken back to the Template Management page with a little message which says "Template Created" and you will see in the list that between the templates called "Smileys" and "Trackbacks" is our one called "testTemplate". We now need to click on the title of it so that we are brought to the 'Edit Template' page. You'll see that (because we told EE to do so) that the template is currently empty - there's nothing in the 'Edit' box - if we'd selected to populate our template with data from another template, then you would have seen some code here.

You will see towards the top right that there is a big green button which says "View Rendered Template" - clicking that at the moment is a little unnecessary as you'll just get a big blank screen. However, when we have something coded, we'll be able to use this button to preview our template. Below this button you'll see the Revision History drop down box - when you save your templates, you will have a list of the amendments that you've made here so you can rollback to a point in the past if you make a boob.

Underneath the edit box (and just above the "Update" and "Update and Finished" buttons) you'll see a bar which says "Template Notes" - it's currently collapsed, but if you press on the + icon (or anywhere on the bar, in fact) you'll have another box open up - this is quite a useful little area to make some notes for this template (especially if you're collaborating working on a project).

Less Talking! More Doing!

Fair enough, we've been doing a lot of preliminary work, let's get down and dirty. The first part is fairly straight forward, we need to create a standard HTML page, with the normal headers and containing elements we would have in pretty much all of our standard websites.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>ExpressionEngine Template</title>
</head>
<body>
	<div id="container">

	</div>
</body>
</html>
	

So, nothing new here - bog standard xHTML strict page with a container div. (Note: for brevity, I haven't included a full version of my standard header with metatags etc.) Now we need to actually get some content into that container so, putting together what we've just learnt above, let's use some EE tags to drag information from our current weblog:

<div id="container">
	{exp:weblog:entries weblog="default_site"}

	<h2><a href="{permalink}" title="{title}">{title}</a></h2>
	<h3>
	By <a href="mailto:{email}" title="email author">{author}</a> 
	{relative_date} ago
	</h3>

	{body}

	<p>Last Edited: {edit_date format="%Y %m %d"}</p>
	<hr />
	{/exp:weblog:entries}
</div>
	

OK, so we've got quite a lot of info here, but stick with it just for a little while. Go ahead and copy that into your "Edit Template" screen (click on 'testTemplate' from within the 'Templates' menu from the dashboard) and then the "Update" button followed by the big green "View Rendered Template" button to see what you've just done.

Not exactly the prettiest thing you've ever created, I would imagine, however, it gets the job done for now. You've dragged in plenty of information from the database using several EE tags and single variables (including {permalink}, {title}, {email}, {relative_date} and {edit_date}) and also displayed the actual entry. Currently our weblog (if you've not modified it since installing) only contains one post, which is why there is only one entry displayed on this page. So what happens if we have more than one entry in our weblog? Let's find out - we'll create some more example entries and get used to the create/edit screen while we're at it.

Creating and Editing

The eagle-eyes amongst you will have noticed that, in the above code, we used the "default_site" weblog when we were dragging in our entry using the weblog module. It doesn't take a rocket scientist to determine that the weblog that is installed by default is called "default_site" - so from our control panel, when we hover over "Publish" (top left) we see "Default Site Weblog" as well as "Edit Weblogs" - this makes perfect sense! For now, we wont bother with editing weblogs (we'll get onto that relatively soon) so click on "Default Site Weblog" and we'll be at the 'Publish New Entry' screen.

Now, we need to go ahead and fill in all the entry boxes - the title, summary, body and extended text - include text which will allow you to identify this entry as the first one we've created (so perhaps a title of "Our first entry" for example) - this way we'll be able to see the display order a little later.

Towards the top of this page you'll see a menu with 7 options (Publish form, Date, Categories, Options, Trackbacks, Pings, Show All) - you should be relatively familiar with these from the first part of this tutorial. Click on Categories and you'll be shown them! If you're coming from another CMS, you'll be familiar with these, if not, categories are basically a 'container' for your entries - they provide a very brief description of what your new entry is about. The default categories as you will see are "Blogging", "News" and "Personal". Select "Personal" for this entry and then click on "Submit" (which is next to "Preview" and "Quick Save" over on the right). You should be greeted by a "New Entry Submitted" message and a rendered version of what you've typed (known as the "View Entry" page.

Right then, let's see what you've done! Either go to "Templates > testTemplate > View Rendered Template" or in a new browser tab (you ARE using a tab-enabled browser aren't you? :) ) go to http://www.myWebsite.com/NotTheSystemFolder/index.php/site/testTemplate/ - you should be able to see your brand new entry sat above the default entry! Awesome!

Hey! Where's my "Extended Text"

Good point! Your "Summary" has also disappeared too. I guess you want them back? Well let's finish this mammoth tutorial by finding out how to go about doing just that. As you will probably have guessed, your summary and extended text haven't 'vanished' - it's just that our template doesn't actually tell EE to display them when we view it. So, let's navigate to our Edit Template screen (Templates > testTemplate) and make a few minor amendments as follows:

<div id="container">
{exp:weblog:entries weblog="default_site"}

	<h2><a href="{permalink}" title="{title}">{title}</a></h2>
	<h3>
	By <a href="mailto:{email} title="email author">{author}</a> 
	{relative_date} ago
	</h3>

	<blockquote>{summary}</blockquote>

	{body}

	<em>{extended}</em>
	<p>Last Edited: {edit_date format="%Y %m %d"}</p>

	<hr />
{/exp:weblog:entries}
</div>

	

So nothing major here - the semantics aren't exactly spot on, but I've put in those extra tags just to highlight what we've done. So if we save and view that, you'll now see that for the article that we created, the summary and extended text are displayed! Perfect! One final thing which will help us later on in this series is for us to display which category our entries are in. The categories tag in EE is unique, simply due to the fact that an entry may be in multiple categories - it is a tag pair, and contains a single variable within them, thus:

{categories}
{category_name}
{/categories}
	

So you can use this bit of code wherever you like - I'm going to pop it at the end, wrapped in a link so that if a user clicks on the category name, they are taken to a page which shows them all of the entries which are within that category, which goes a little something like this:

<div id="container">
{exp:weblog:entries weblog="default_site"}

	<h2><a href="{permalink}" title="{title}">{title}</a></h2>
	<h3>
	By <a href="mailto:{email} title="email author">{author}</a> 
	{relative_date} ago
	</h3>

	<blockquote>{summary}</blockquote>
	{body}
	<em>{extended}</em>
	<p>Last Edited: {edit_date format="%Y %m %d"}</p>
	<p>Posted in: 
	{categories}
	<a href="{path='weblog/index'}">{category_name}</a>
	{/categories}
	</p>
	<hr />
{/exp:weblog:entries}
</div>
	

Is it over? Tell me it's over!

OK, it's over. This is quite an epic tutorial, but when we run through exactly what has been achieved, I reckon you'll be quite pleased, we've:

• Discussed certain EE terminology
• How to view templates
• The magic of EE Tags
• Created a very basic template
• Utilised several EE variables, tag pairs and parameters
• Created some content from the Control Panel
• Made several cups of coffee

What Next?

We've still got plenty to do in the remaining three days - our current 'template' is a bit pants really, so we should probably spruce it up a bit (a LOT). We also need to learn how to create a fully-fledged template; modify settings in our control panel; learn how to use other modules correctly; and talk about some of the really useful features that EE possesses. We'll also delve into some of the modules and other features that aren't available in the free 'core' version of EE - so stay tuned over the course of the next three postings! Thanks for reading; please feel free to ask questions in the comments below.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.