Click the submitbutton, and in a whirl the system will be installed, your database tables will be populated, and a success page will appear, inviting you to check out your Control Panel (shown in Figure 4-2) and your actual blog.
Very important: All that remains is to delete the install.php file from your server for security purposes.
How does ExpressionEngine actually work?
Get to know the EE Control Panel because it will be your cockpit for the foreseeable future. To begin with, you’ll learn about the Templatesfunctions. In subsequent sections of this chapter, you’ll learn more about some other key Control Panel tools, such as Publish, Edit, and Admin. Sections such as Communicate(the email module) and Moduleswon’t be relevant for this chapter, although I recommend that you find some time to explore the wonders within them.
The Control Panel homepage (see Figure 4-2) shows you an overview of activity to date.
Typically, you will see two columns with the latest posts and comments linked on the left, and stats and a notepad on the right. After install, you’ll see one sample entry is automat- ically added to your site.
If for some reason your installation didn’t go smoothly, scroll to the bottom of the Installation Instructions (www.pmachine.com/expressionengine/docs/
installation.html)page for some troubleshooting tips.
Figure 4-2. Control Panel homepage
Before you set about defining your blog structure, it is worth delving into how EE’s tem- plate system actually works. Brilliantly, everything is self-contained, edited through a browser, and very, very flexible.
Templates
When you click the Templates menu item, you see the screen shown in Figure 4-3.
Figure 4-3. Template Management screen
4
You’ll find two template groups already available, namely weblogand search(refer to Figure 4-3). Each group contains at least one template, each of which at this stage can be thought of as a complete page (made up of <head>, <body>, and all the other things you expect from a web page). This is EE structure in its simplest form.
EE URLs most likely look strange to you. The EE authors were careful to avoid using query strings (such as www.localhost/index.php?id=2&page=1), in which question marks and ampersands are used to fetch database information). The main reason was to make URLs easier for search engines to understand. So, all EE queries flow through the index.phpfile, and the work is done in the background. After the index.phppart comes segments named and specified by you.
So how come you get to name these segments? Well, EE templates are stored in template groups that you create and define based on the site sections you need. The following description should help you understand the correlation between URL segments and tem- plate groups.
Look at a typical EE URL. In this example, you’ll notice two additional words after the index.phpsegment. These are not directories, even though they look like directories. They are references to EE templates and groups created by you.
http://localhost/index.php/weblog/archives
In this example, weblogis the template group, and archivesis the actual template. These are templates and groups that you create. Sure, EE has some basic structure after install, but nobody is dictating anything to you here—you decide the structure and you structure with templates. Creating a new template group with its own templates inside creates new URLs to build your site. So, if you created a new group called blogand inside that you made a template into which you’d place an archive of all your articles, you might end up with a URL such as this one:
http://localhost/index.php/blog/archives
Clicking to read more about each would require an individual article page, perhaps a new template called more. Dynamically, the EE system would use this moretemplate to render the selected article, and automatically add the title of the selected case study to this URL:
http://localhost/index.php/blog/more/my_first_article
Thankfully, there are a number of shortcut tags you can use to avoid typing out such long strings as you build, which will also make it easy to move your entire site to a different domain with the minimum of fuss. In fact, you’ll never have to type the http://
localhost/index.phppart anywhere in the templates.
It is important to understand this URL concept before moving on. Knowing the name of the template group and the template will allow you to adjust URLs in your browser to view pages in progress, long before you link to them from any other pages.
Be aware that, by default, all template groups contain an index template, which you cannot delete, but can fully customize. This template is useful for creating shorter URLs for particular groups, essentially forming that group’s homepage. The following two URLs lead to the same destination:
http://localhost/index.php/blog/index http://localhost/index.php/blog
So, you’ll have different template groups for different sections. You might have a portfolio group, an image gallery group, a journal group, and so on—each containing specific tem- plates, or pages. On a typical site, you might then assign a template group to a particular section, or weblog.
Blogs, custom fields, and categories
Upon install, a blog called weblog1is already created for you. It will contain one sample article and three sample categories, and you write your entries using basic entry fields.
Before you go on, it is worth learning a bit more about all of these.
Blogs are the sections of your site and contain the information to be displayed. This is in contrast to templates, which specify how that information is displayed. In other words, the content is separated from the site’s design. Blogs are of course tied in with templates. If you were to create several blogs (sections), such as one for your journal, one for your portfolio, one for album reviews, you should create a template group for each, naming them after your blogs. Thus, entries from your reviews blog should appear on your reviewsgroup templates. This is not essential, but if you end up building big websites with EE, this modeling will really make sense of your structuring.
Sticking with the preceding example, you might create a blog called blog. In that blog you would place your blog entries, or case studies. By calling these entries into your blogtem- plates, you determine how they are rendered on the site. You can define a set of custom entry fields, such as “Intro”, “More detail”, “Related links”, and so on, to actually enter the data for the different parts of a page, just like any other web form. After you have entered data using these fields, you can control how the data is displayed on a field-by-field basis.
For example, you could display the “Intro” field’s text on one page and link to another page that contains all the other fields’ text, formatted as you like it.
Finally, you can categorize the blog entries into areas such as “Family”, “Work”,
“Observations”, and so on. You’ll learn how to do this later in the chapter.
Earlier, I suggested that you can think of templates as pages, and this is mostly true. Yet, this limits the way in which EE can really save time and effort and increase flexibility. This is where embeds can help.
4
Embeds
In this chapter, you will create some templates that are not “pages” at all. Rather, these will be embeds, which are chunks of information that can be inserted into multiple pages where the same content is desired, for example page headers or footers, navigation menus, and so on. When you change the content of these embeds, this information will be automatically updated in every page that the embeds are included in. External JavaScript and CSS files work in a similar way, in that they are called into a template using a file ref- erence, but the actual code remains external. Making one change to your CSS file affects all pages referencing it, and this method helps us understand template embeds. Many web designers use server-side includes in the same way, where there is a file that exists else- where on the server that is pulled into a full web page where necessary (something easily achieved using PHP). Thankfully, EE’s embeds make this process incredibly simple and keep everything self-contained within the Templates area of the Control Panel.
Rest assured that later in the chapter you’ll learn step-by-step how to create simple embed templates to get EE working hard on your behalf.
So, if you understand the preceding ideas but want to read more, check out the EE User Guide, which can be found at www.pmachine.com/expressionengine/docs. Otherwise, go and make a pot of tea because when you come back, you’ll be getting down to some seri- ous hard work.
Structuring your blog
In this section you can forget the theory, for it’s time to get practical. Later you’ll get to play with the CSS, but first you’ll work through modeling your blog’s structure. To start with, you’ll create a new homepage and full article page before moving on to categories and customized entry fields. After that, you'll define a few preferences and adjust some EE tags to refine template performance. Finally, you’ll make your comments system a bit smarter and carve the templates into embeds for easier site-wide management. Keep an eye on the walk-through steps to ensure that you don’t miss a trick. In this section, you’ll come to grips with the following:
Turning the system off: Working privately so that only you as the logged-in admin- istrator can see the site taking shape at the URL.
Defining Template Group and Template: Creating your first editable template and using this as a basis for your site’s URL structure.
Editing templates: How to manage templates and fine points of editing.
Brilliantly, you can place an embed in an embed, in an embed, and so on. Sure, there are a few rules to watch out for, but for now just celebrate and think about what you’ll do with all that time you’ll be saving.
Redefining categories: Taking the default categories and changing them to suit your needs.
Defining custom blog fields: Extending the default data fields to get more out of publishing.
Specifying groups for your blog: Extending the functionality of the blog area by assigning categories in which to archive items and defining a custom set of data fields to hold the information.
Default blog and preferences: Ensuring that the blog works the way you want it to.
Turning the system off
First things first: You need to switch the system off. Yes, off. EE allows you to prevent snoopers from viewing your build. As Super Admin, you can still view your site by logging in to the Control Panel and then calling up http://localhost/index.phpin your browser.
Go to Admin ➤System Preferences ➤General Configuration and switch the system off (see Figure 4-4).
Figure 4-4. Be sure to switch the system off.
Defining Template Group and Template
1.Make your way to Templatesfrom the main menu. On the right side of the bread- crumb menu, click Create a New Template Group.
2.In the box (see Figure 4-5), type a name for what will be your main template group by using a single word with no spaces (underscores are allowed). Remember, this name will form the basis of many of your site’s URLs. Call it blog.
3.Opt to copy the weblogtemplate group by selecting weblogfrom the drop-down box, which will make a full copy of the files and preferences of the default weblog template group. You do this primarily because it illustrates a very useful feature of EE, but also means you have a back-up group of the templates as they were installed, just in case you ever need them.
4.Click Make the index template in this group your site’s homepage, which will force this template group’s index file to be your site homepage, making the following two URLs identical:
http://localhost/index.php/blog/index http://localhost/index.php
4
5.Click Submit, which will create the template group and take you back to the tem- plate group page.
Figure 4-5. Create a New Template Group.
So you now have a new template group (blog) and homepage (blog/index) defined. You’ll now see three groups, including your bloggroup on the Template Management screen.
Click on blogto instantly expand and show all templates in the group (see Figure 4-6).
There are quite a few choices and bits of info for each template, including hits for that page. You can also Viewa template in a new window, use Accessto ban certain member groups from seeing it, and Deleteit. Ignore most of these and the other options for now.
Figure 4-6. The blog template group expanded
Editing templates
Each template name is a link to an editable version. For example, you would click the indexlink to view and edit the source code (see Figure 4-7). Remember that this repre- sents a full page, so you could edit the headinformation and all the bodycode right there.
Remember this because you’ll be in these templates rather a lot later in the chapter.
Figure 4-7. Editing a template
Redefine the categories
The default categories are unlikely to suit your needs. Naturally, it’s easy to edit and add categories using EE. Follow these steps to change the categories:
1.Go to Adminfrom the main menu, and in Weblog Administration, select Category Management.
2.Rename the category group, by selecting Edit Group, and call the group Blog. Click Update to make the change. This will also take you back to the Category Management screen.
3.Now, select Add/edit Categories. From here, you can delete any unwanted cate- gories, grab the category ID (not required for this tutorial), or customize the order (see Figure 4-8). For now, keep them alphabetical and select one to edit by clicking the Editbutton.
4
4.In the required Category Namefield, rename the category using plain English (any number of words) to whatever you need. (You will not need to specify a category image or description for this tutorial.)
5.As EE allows you to nest categories, you can also opt to make the category the
“child” of a “parent” category by selecting another from the Category Parentdrop- down menu. For example, you could create a category called Appleand make it the parent of child categories Software, Hardware, iPods, and Downloads.
6.Now add more categories. Select Create a New Category to the right of the breadcrumb menu on the main category page. The form is the same as the one for editing. Create a category called Movies before creating child categories Adventure, Horror, and Comedy. You can assign the parent to a child category when you create the child category.
7.Repeat this process and keep editing categories/parents/children until you’re happy with your initial blog categories. Try Music, News, and Family as other parents, and assign your own children to these.
Figure 4-8. Managing categories
Define custom blog fields
The final chunk of prep is to define custom entry fields for your blog (see Figure 4-9).
Possibly the most powerful element of EE, the ability to customize a blog with its own unique unlimited entry fields and then to decide whether to use that set on all or just selected blogs is what makes EE a great CMS tool. Once you gain experience, you can use EE conditionals and more-complex standard PHP to add, combine, and check the con- tents of your fields for very powerful results.
Brilliantly, each field can be further tweaked. Do you want your new field to be a text input, text area, or drop-down? Is it searchable? Is it required? How will you format it:
XHTML, auto <BR>, or none whatsoever? In this tutorial, you’ll use XHTML for text inputs and text areas, and no formatting for drop-downs.
I won’t let you use auto <BR> because it’s not big, not clever, and not appropriate for a site that is built using web standards because break tags are like presentational dinosaurs that litter otherwise clean markup (and can be avoided with <p>tags and a little CSS).
Figure 4-9. Creating a new custom entry field
Set the mood
By default, there are three fields: Summary, Body, and Extended. The Titlefield cannot be removed or edited, and there is no reason why you need to. Anyway, now you will refine your custom entry fields, removing Extended and adding a new field called My Mood Today:
1.Go to Admin from the main menu and in Weblog Administration, click Custom Weblog Fields.
2.Only Default Field Groupexists, and you need to click Add/Edit Custom Fieldsto remove/add fields.
3.Delete the extraneous Extended textfield. You do not need it, and removing it will keep your published pages clean and simple. You can just use the Bodyfield for your extended article text. Still, it’s useful to create a new field here, just so you know what’s what.
4.On the right of the breadcrumb menu, click Create a New Custom Field(refer to Figure 4-9). Let’s see. Why not create a field to tell your readers what mood you are in?
5.Field Nameis the variable name you will place in the template to show the data.
Type mood.
4
6.Field Labelis the plain English label or sentence that will show on the Publishing page. Type My mood today.
7.Decide what kind of field it needs to be. Try a Drop-down List.
8.If you then choose Nonefor Default Field Formatting, you are free to style the data however you want in the template, and I recommend this for drop-downs. Text inputs and text areas benefit from being XHTML-formatted because data line breaks will have paragraph tags appended nicely.
9.The drop-down doesn’t need to be searchable or required, so skip to the Select Optionsbit. Very simply, add each option on a line of its own: Feeling groovy, Bit bored, Happy as Larry, My eyes are bleeding!
10.Click Submit. Hey Presto! A field of your own. Once back at the main menu of your field group, you also have the option of rearranging the field order, which is very useful for larger sites and for blogs in which you forgot to add seven fields.
While you’re here, you can edit the Summary field to allow people to search it. Click the Editbutton for Summary and then set the Is field searchable?radio button toYes.
Specify groups for your blog
By groups, I mean custom entry fields groups, such as the custom entry fields group you edited just now, and category groups, such as the Blogs category group. There is also something called a status group, but you don’t need it in this chapter. Groups add extra power to each blog area, extending the capabilities of each and modeling the data it contains.
For example, without assigning groups to a blog, you wouldn’t have any fields in which to enter your data or categories in which to archive the articles, so your pages would be blank. Likewise, if you created a new category group for a blog, without assigning it to the blog, you couldn’t place articles into those categories or make use of the custom fields you defined for it.
Opting to Display Formatting Buttons in Weblog Preferences allows you to override the Default Field Formatting choice in the Publishpage on a per-entry basis.