Difficulty:Easy
Version:Expression Engine 1.0: 20040523
Buy My Book!
Update July 2008: If you like these tutorials and would like to read more like these, except updated for ExpressionEngine 1.6 and with tons more information, tips, tricks and recommendations, check out my new book, Building Websites with ExpressionEngine 1.6. Available either directly from Packtpub.com or from your local online bookstore (such as Amazon), this book uses the same clear, step-by-step approach found in these tutorials and walks you from the basics of installing ExpressionEngine to everything you need to know to have an ExpressionEngine website you can be proud of. (No prior knowledge of ExpressionEngine assumed).
This tutorial is designed for complete beginners to Expression Engine. Perhaps you've just handed over your cash, or you're just running their demo to see how it all works. Whatever the case, you'll need a crash course in "Expression Engine" and that's what I'm going to try and do. I'll introduce you to some of the basic concepts of Expression Engine, to help you feel comfortable and to avoid unnecessary frustration. At the bare minimum, I hope you get to the stage where you can ask questions in the forum without getting confused by the answer.
Background Information
Expression Engine is a Jack-of-all-Trades. It appeals to a huge cross-section of the Internet: from people who want a simple way to write their website, to dedicated bloggers with a story to tell. Have a look at the support forums and you’ll see a wide range of people all trying to do different things.
When you get a tool as complex and powerful as this, it develops a language of its own. People start talking about templates and weblogs and tags and variables. Let me start at the beginning…
Instructions
Don't panic! It's all easier than it seems...
- Step 1: First, lets log in to Expression Engine in order to start your tour. Go to http://www.yourdomain.com/system/index.php/, where system is the name of your system folder (you may have renamed it during installation), yourdomain is the name of your website, and index.php is the name of the login file.
- Step 2: Now we are logged in, you'll probably see lots of information that isn't really important right now. Our first port of call is going to be the 'templates' screen. Templates are the basic concept in Expression Engine, and I'll talk more about them soon. First, click 'templates' in the blue menu along the top of your screen.
- Step 3: The basic concept in Expression Engine is that of a template. Go to any Expression Engine site, and you'll be looking at a template. Even this tutorial page is a template. Templates are what the outside world see. Templates are stored in groups. There's no "right way" to group your templates - although it's better to group related templates together. For this tutorial, lets create a template group to demonstrate the concept. At the top right of the screen, you'll see an option to "Create a New Template Group". Click that.
- Step 4: This screen isn't too hard to understand. You can give your template group a name, I'm going to call mine 'tutorial0'. You have an option to make the index template your site's homepage. That means that when people visit your site, they'll see the template group we're about to create first. If you already have a site up and running, then don't check this. If you want this tutorial page to be the page everyone sees, then check it. I'm guessing not. Hit submit when you're happy.
- Step 5: Back in the template management screen, you should now see a template group called 'tutorial0' (or whatever name you chose) - just like in the diagram below. The template group also comes with a free template, called 'index'. This cannot be deleted. Let's edit your new template and see what it does. Hit 'edit' in the 'index' row.
- Step 6: A template is essentially just text. You can see two boxes - one is the template itself, and one is to store notes. Since we're not doing anything too complex, we'll ignore the notes box. Lets write something in the template box. As you can see from the picture, you can just write plain text, although HTML, CSS, and a host of other code can also be included (which isn't part of this tutorial). Now hit update.
Note that although you can rename your index.php file, you cannot delete it since this is the file that can talk to Expression Engine. If you want to hide it, read this discussion about setting up redirects using a .htaccess file
- Step 7: Templates relate directly to the website address. Now that we've written something in our template, we can go and visit it. Essentially, go to http://www.yourdomain.com/index.php/tutorial0/ and you should see your site. Note that you can rename index.php to something else, which is why my site has the word 'welcome' instead.
- Step 8: You can also access the same file by going to http://www.yourdomain.com/index.php/tutorial0/index/ and you'll also see your index page. In this case, the /index at the end of the URL specifies which template you want to see in the tutorial0 template group. If you don't write any template (or the template you write doesn't exist), then you'll get the index template by default. (This is why you cannot delete the index template).
- Step 9: Lets demonstrate how you can use different templates within the same template group. Go back to the main template management screen by clicking on the "Templates" option either in the blue menu bar at the top of the control panel or in the breadcrumbs just underneath.
- Step 10: Now lets add a new template to our tutorial0 template group. Click on 'Add a New Template'.
- Step 11: There's a few options, most of which you don't need to worry about. Your template type will almost always be a 'Web Page' - the other options are just for your convenience - sometimes you may want to duplicate another template. We won't do that now. Rather, we'll just create an empty template. I'm going to call mine 'llama' because it's fun to say. Call yours whatever you like. Hit submit when you're done.
- Step 12: After hitting submit, you should find yourself back at the template management screen, with the following green message at the top.
- Step 13: Now before we have a look at our new template, we'll just want to write something to distinguish it. In the template management screen, scroll down to the template group called 'tutorial0' (or whatever name you chose) and click 'edit' in the 'llama' row.
- Step 14: Once again lets write something in the template box. Make sure it's different so you can be sure of which template you're seeing. Now hit update.
- Step 16: As I said in step 3, a template is the most basic concept in Expression Engine. Everything you see is a template. The trouble with templates is that they're code intensive. If you want to write something on your website, whether it be what you had for tea yesterday or an important notice about tax evasion, you certainly won't want to be fiddling around in templates. However, the beauty of Expression Engine lies in the vast range of tools available to you. One of the most important is that of weblogs (or data containers) which I shall introduce now. A weblog is essentially dynamic data. In other words, anything that changes regularly should be a weblog, and anything that stays the same should be in a template. Lets set up a basic weblog now. First, click 'admin' in the blue menu along the top of your screen.
- Step 17: There are lots of options in the admin screen: Expression Engine should work just fine with the defaults, so we won't change anything now. Click 'weblog management' in the 'weblog administration' group.
- Step 18: Here is a list of all your weblogs (dynamic data containers) so far. If you're just starting out, you may see one weblog called weblog. Don't be confused by this - it's like calling a dog 'dog'. Anyway, let's create a brand new weblog. Click 'Create a New Weblog' - hidden away in the top right hand corner.
- Step 19: Here you get to give your weblog two names. Your shortname is used in the URL (address bar) and so must be one word and ideally lowercase - I've chosen 'tasmaniandevil' as my word. The long name can have spaces, and is used to describe your weblog to other people - I've chosen 'The Tasmanian Devil' as my long name. Once you've chosen your names (or used mine), hit submit.
- Step 20: Now you should be back in the weblog management screen, but this time with a new weblog called 'The Tasmanian Devil'. There are 3 options: you can edit the preferences (which are not part of this introductory tutorial), you can delete the weblog, or you can edit the groups. Each weblog can be associated with a set of categories, a set of status fields (e.g. whether an entry can be seen on the web or not) and a set of fields (in which you enter data). Without fields, you cannot enter much data, so lets just edit the group.
- Step 21: Categories and status groups are beyond the scope of this example tutorial so we're just going to select the 'Default Field Group' from the drop-down list and hit submit. The default field group consists of 3 fields: a summary, a body and an extended text. Essentially, it's just 3 text boxes as we'll see in a moment.
- Step 22: You should be back at the weblog management window, with a message just under the 'Weblog Management' title saying 'Weblog Updated: The Tasmanian Devil'. Now we have fields, we can publish some dynamic data. Hit publish on the far left of the blue menu at the top of the screen.
- Step 23: You want to publish in your newly created weblog, so select 'The Tasmanian Devil' from your list. This list will probably match the list in the weblog management screen.
- Step 24: This screen can be quite overwhelming for beginners, so we'll go through this slowly. First, our entry will probably want a title. This can be anything: "What I did over the weekend" to "Interest Rates Rise 0.25%". The URL title is where your article will appear on the website. If you leave this blank, Expression Engine will most likely convert your title into something like this: "what_i_did_over_the_weekend". You may prefer to shorten this to "weekend", but remember that URL titles must be unique. So, if interest rates are likely to rise by 0.25% again next month, then you may want to use the date or a number to make your URL title unique: e.g. "interest_rates_july_2004" or "what_I_did_over_the_weekend_1". Since this is my first entry, I'm going to celebrate it by calling it "Champagne Delight".
- Step 25: Ignore the grey "button mode" box for now. This allows you to insert HTML tags into your entries, or even images and emoticons. Instead, write some text in the 'summary', 'body' and 'extended text'. Each field can be put in different parts of the page - for example, you might want to put the summary in italics at the top of the page, and not have the extended text visible at all. Leave the 'Formatting' radio button alone for now (e.g. XHTML) - this is quite a complex feature. Make sure you write something unique in each field. You can also ignore the 'Trackback URLs to ping option'.
- Step 26: On the right hand side there are more options. You can ignore the categories (if there are any). Make sure you don't 'ping' any sites: this tells that that you've updated your site, but for this tutorial I'm not sure the world will be that interested. We won't be dealing with comments or trackbacks right now, so why not de-select them? Leave the experiation date blank, since after this date your entry will no longer be visible. Also make sure that your entry date is in the past (since an entry is not visible until after the entry date). This can be used to (for example) let people know you're on holiday, but not until the morning you go, and only until the day you get back. The author can be selected from a drop-down list - if you've just installed Expression Engine then only your name will appear. Finally, make sure the status is 'open' (i.e. visible) and hit submit.
- Step 27: You'll get a screen with the message 'New Entry Submitted' and the text of your message. There's just one question remaining. Where is your entry? The fact is, your entry isn't on your website. That's because your website consists of templates, and your entry is in a weblog. The next step is to put the weblog into a template. So, click on 'templates' in the blue menu bar.
- Step 28: By now you should be getting familiar with the templates screen. Lets put our weblog in our 'llama' template by editing the template.
- Step 29: To include a weblog in a template, we use a tag. A tag is an Expression Engine only piece of code that is used in templates to include additional functionality. In this case, we want to include a weblog, so we're going to use a weblog tag. A tag is broken into two parts: variables and parameters. Not all tags have variables or parameters. There are tags, for example, that just get the name of the member currently logged in. Parameters are information you include within the initial tag: for example, in the weblog tag we use a parameter to say how many entries we want to display. Variables are used between a starting tag and a closing tag. For example, after the starting weblog tag you might use an author tag to display the name of the author. It's quite complicated, and there is no definitive tag library as yet. So, delete the contents of your llama template, and write the following instead.
- Step 30: Hit submit, and visit your llama template at the address you used in step 15. Notice how, instead of wiggly brackets like {title}, coherent text is being displayed. But not only that, it's the text we entered in our first weblog entry.
- Step 31: Now let's write a 2nd entry to our weblog. Hit publish and select your weblog (mine is called the Tasmanian Devil).
- Step 32: This time, you can write what you like in the title, summary, body and extended text fields. Check the fields are XHTML formatted and that you're not pinging anyone (in the right hand column). Disable comments and trackbacks for now. Leave everything else as default and hit submit.
- Step 33: Hit submit, and visit your llama template again or just visit my version. Notice how, I've now got 2 weblog entries displayed instead of one.
- Step 34: For one last trick, I'm going to display the author and the date of each post. Go back to your llama template, and add the following line.
{extended}
{/exp:weblog:entries}
- Step 35: Hit submit, and visit your llama template again or just visit my version. Notice how the author and the date are now displayed underneath each entry.
Summary
This completes your introduction to the most basic features of Expression Engine. By now you should be familiar with the concepts of “templates”, “weblogs” (as data containers) and “tags”. Just to refresh in 8 words, tags go in templates to point to weblogs! Expression Engine is a very versatile tool, and you probably have your own unique ideas about what you want to do. By following this tutorial, you should at least have some idea of how the underlying concepts interact, enabling you to seek further help in the user guide, or in the support forums.
Other pages that might interest you include the documentation about date variable formatting, weblog tag parameters and weblog tag variables. Also of interest might be the pMachine introduction to templates and introduction to tags.
Finally, don’t forget to have a browse through my other tutorials for a helping hand.
Got something to add? Add your comment to the 13 already made
Written by Leonard on Saturday 29th May 2004