This is the 4th chapter in the Building an ExpressionEngine Site Series.  In previous chapters we downloaded a free HTML/CSS template, loaded it into EE, broke it up into embedded templates, re-jiggered the main navigation, and used some ExpressionEngine global variables to add the Site Name and home page links.  We also looked at the content requirements for the imagined site, and developed an approach to how to manage the content with a combination of ExpressionEngine weblogs, custom fields and categories.

In this chapter we start developing that data structure by implementing the Home Page weblog with a Simple Content custom field group.  Then we’ll pull the content that we want editable out of the template, post it into the weblog, then add the necessary EE tags back to the home page to get ExpressionEngine to pull the content from the new weblog.

Creating the Homepage Weblog

• In the ExpressionEngine Control Panel, click the “Admin” tab, then “Weblog Administration”, then “Weblog Management”.
• Click the “Create a New Weblog” button in the upper right corner of your screen.
• Fill in the Full Weblog Name and Short name fields.  I’ve called mine “Building Series Homepage” and “bees_home”, respectively.  The Full Weblog name is what will show in the Control Panel under the Publish and Edit menus, and the short name is what you will use as a parameter when setting up EE tags.  I normally am not so wordy with the Full Weblog name but the weblogs required for this tutorial are going to appear in the same menus as the ones that drive the rest of Boyink.com—so I want to group them together with the same “building series” prefix.  I also usually keep the Full Name and Short name as close as possible—as it makes it easier to remember when coding.
• For now, just accept the default settings on the rest of the options here, and click “Submit”.

Creating a SimpleContent Custom Field Group
Now that we have a weblog, we need to create and assign a new field group to it.  As we determined in Chapter 3 the Home page, the About page, and the Services section will all share a “Simple Content” field group that has only the default (and required) title field, a URL Title field, and a catchall “Page Body” field.  Here are the steps to create the new group:

• In the EE Control Panel, click the “Admin” tab, then “Weblog Administration”, then “Custom Weblog Fields”.
• Click the “Create a New Field Group” button in the upper right corner of your screen.
• Name the field group.  I’ve called mine “simple_content”.  The name isn’t a huge deal - the only place you’ll use it is when assigning it to the weblog. Click “Submit”
• ExpressionEngine will now flag you that you need to assign the field group to a weblog in order to use it.  For me, this always seems a bit out of sequence as I first want to create fields within the group, then - once it’s fully created - assign it to the target weblog.  So that’s how I’m going to proceed.

Adding a Field to the New Field Group
New field groups will have only the Title and URL Title fields by default.  Anything else must be added.  We need just one additional field, so here’s how to add it (Note: you can also reference the EE docs for Custom Fields in addition to my steps below):

• In the list of custom field groups showing below the warning, find the new group you just created - again “simple_content” in this tutorial - and click the “(0) Add/Edit Custom Fields” link.
• On the next screen (where EE should be telling you that there are currently no fields in this group) click the “Create a New Custom Field” button in the upper right corner of your screen.  Remember that EE will provide the Title and URL Title fields by default, so we only need to create one more field.
• Enter the Field Name for the new field.  I’m going to call mine “page_body”.  Keep in mind that the value you enter here is what you’ll use while coding your templates.
• Enter the Field Label.  This is what will show on the Publish or Edit screens for this weblog, so it should be more user-friendly.  I’m going to specify “Page Body” as my label.
• Specify field instructions if you feel they are necessary.  These will also show on the Control Panel Publish or Edit screens, so this is a good place for text that will help end-users know what to do, where this content gets used, size guidelines for images, etc.
• Choose the Field Type.  For this example we’ll want a Textarea, as the content is likely to be longer than a text field will allow.  A textarea will also show more content at a time in the Control Panel.
• Choose the number of rows.  This setting only changes how big the textarea is on the Control Panel Publish and Edit screens - it doesn’t change much much content the field will hold.  I’m going to specify 20 rows.
• The next setting is important: Default Text Formatting for This Field.  The three choices are “XHTML”, “Auto <br/>” and “None”, and these will control how EE applies formatting to the content entered in this field.  I find that I most often use XHTML or None.  For our current field, let’s stick with XHTML as then EE will mark up the content entered with paragraph tags, which is appropriate for our intended use.
• Let’s leave the formatting field visible and keep Text Direction at the default of “Left to Right”.
• Since this field will likely hold an entire page’s worth of content, let’s take a step to prevent users from publishing blank pages by choosing yes to “Is this a required field?”.
• The next option - Is field searchable? - is one that I tend to forget and have to come back to.  By default this is set to No, and as a result when implementing the search engine I won’t get the results I expect.  Let’s set this to “Yes” now so that doesn’t happen.
• The next setting - Show this field by default? - should also be set to Yes - so that end users won’t have to expand it to enter or maintain the content while Publishing or Editing
• Field Display Order - this is valuable for field groups that have more than one field.  In this current case we can just leave this alone.
• Click “Submit” to save your new custom field.

Assigning the New Custom Field Group to the New Weblog
Now that the field group is complete we have both a new weblog and a new field group.  They are not yet “connected” in ExpressionEngine yet, though.  To do that we need to assign the new group to the new weblog.  Here’s how:

• In the EE Control Panel, click the “Admin” tab, then “Weblog Administration, then “Weblog Management”.
• On the next screen, find the name of your new weblog—“bees_home” in my case.  Click the “Edit Groups” link associated with it.
• There are three different groups that can be assigned to a weblog: Category, Status, and Field.  This Homepage weblog will not use categories, so skip that.  If Status shows “None”, click the drop-down and choose “default status group” (this tutorial won’t cover Status Groups specifically, but I have had odd results when no Status Groups were assigned).  In the Field Group drop-down, choose the name of the new field group you created.  For me this is “simple_content”.
• Click “Update” to save your changes

You can verify that the new weblog and new field group are connected properly by clicking “Publish”, then choosing your new weblog from the list.  The entry screen should load with a field structure of “Title”, URL Title, and Page Body.  If not, run back through the steps above for assigning the field group to the weblog.

Pulling Content from the Template
With the weblog and field group setup and assigned, we are ready to move the main content from it’s static form on the index template into Weblog posts.  Here’s how I’d go about it.

• Click the “Templates” tab and find your Index template.  Click its name to open it for editing.
• In our example template, the main page content starts under the “left_side” div.  The h2 will contain the title of our weblog post, so for the moment leave that there.  We want to select and cut all the code starting with the image tag, down through the unordered list just above where the left div closes

OK, hang on here.  While I had originally planned that all this content would get put in one weblog post, looking at the code and the way the h2 tag is used again for the “Our Assets” paragraph, I’ve decided that I’ll code the home page to allow multiple posts, and each post will be a section on the home page with an h2 title.  This would allow a client to have a variable number of sections on the home page, each promoting a different aspect of the business.  And - it will prevent clients from having to markup section headings with h2 tags as the template will do this for them.

With that mid-stream decision made, let’s get back to the moving of the content.

• As stated above - starting just below the first h2 tag (include the image tag), select down to just above the closing left_side div tag and cut out your selection.
• Save changes to the template by clicking “Update”.
• Tip - in this spot I’ll usually fire up a blank Notepad document (working on a PC) and paste the text in from the clipboard.  This will prevent losing it accidentally when cutting/copying/pasting something else to the clipboard.
• If you refresh the Index template in your browser, you should have the the “Abous Us” header with an empty content area - I’ve included a screenshot of my template at this point in the process.

Putting Content into Weblog Posts
Let’s get our content into a couple of posts in our new Homepage weblog:

• Choose Publish, then Homepage.
• Enter a title of something besides “Abous Us”...in a fit of sheer creativity, I’m going to title my post “Welcome”.
• Paste in the content that you cut from the template
• We don’t want the whole chunk of content from the template, however, so select from the “textbox” div above the “Our Assets” h2 tag down to the end and cut that back out, leaving the image code and 4 paragraphs of text including the blockquote.
• We have the field formatting set to “XHTML”, so we need to pull out all the paragraph tags otherwise we’ll get double tags on the rendered page. Pull them out of the blockquote as well (note - I’m going to re-format the css file to make it so the special “mpnull” p class inside the blockquote is unnecessary, as this would have to be assigned manually by a client/user.  I can use a #maincontent blockquote p css declaration to apply the same formatting as mpnull would to paragraphs inside a blockquote).
• Once you have the paragraph tags removed, save the entry.  I’ve posted a screen capture of my version here (it’s the first of the two screenshots).

• Now create an “Our Assets” entry by choosing again “Publish”, then “Homepage”.
• Enter a title of “Our Assets”, then again paste in the code from your clipboard.
• Let’s just lose the textbox div altogether, leaving this post containing the 2 paragraphs and the unordered list.
• Remember again to remove all the paragraph tags.
• Also - remove any spacing around the ul and li tags - make sure they are flush-left with only one carriage return between them.
• I’ve again uploaded a screen capture of my entry for reference (it’s the second of the two screenshots).

Adding EE Tags to the Index Template
Still with me?  This is a long chapter, I know.  But we’re to the really fun part now—putting the EE code into the template to get it to draw our our content from the weblog.  We’re going to use the exp:weblog:entries tag, which is the one you really should get familiar with first, as it’s the most common tag you’ll use while putting an EE-based site together.

Here’s a text version of the final template—open that so you can see how the weblog:entries tag is configured (Note- In order for each chapter to exist on it’s own, I’ve had to create a chapter-specific embedded template group for each chapter.  If you are copy/pasting the EE code into your installation you will have to edit the paths to each embedded template).  Let’s talk through what’s going on:

• Weblog parameter—since we want entries only from the Homepage weblog we need to specify it.  It’s just a good habit to always be specific about where you want to pull content from.
• Disable parameter - our template would still work without this parameter - but it’s a good idea to get in the habit of turning off aspects of the weblog:entries tag that yo don’t need.  The more you can disable the better your performance will be—see the EE Docs for more information on the disable tag.
• Sort parameter - the weblog:entries tag defaults to sorting by date in “newest at the top” order (one of those times where it’s weblog roots does show).  Since we put in our “Welcome” post first if we didn’t change the sort it would have gone to the bottom of the page.

And the results?  Here’s a screen capture of the rendered version of the template, now pulling it’s main page content from an EE weblog.  The “live” version can be found here, just keep in mind that the content will change with subsequent chapters in the series, as I’m going to keep using the same weblog.

Whew!  Quite a chapter—but definitely an important one.  If you compare the source code of our original HTML template to the text version of the current EE template you can see we’ve come a long ways in integrating ExpressionEngine into the site design, with the same rendered page, but a vastly simplified main template and our content now stored in a database for ease of updates.

What’s Next?
In Chapter 5 - we’ll get rid of the unneccessary trackback code that EE is putting into the source code of our page, and we’ll implement a “miscellaneous content” weblog to hold the footer contents so that it will be editable via a weblog post.

On to Chapter 5.
Back to Chapter 3.