Train-ee | Learn Expression Engine Fast

04 - Implementing a Weblog and Custom Field Group to Hold Home Page Content

In this chapter we start developing our 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 EE Control Panel, click the Admin tab, then Weblog Administration (in the left column), 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 “Home” and “home,” respectively.  The Full Weblog Name is what will show in the Control Panel under Publish and Edit, and the Short Name is what you will use as a parameter when setting up EE tags.  I 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 Simple Content 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, About and 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 Field Group:

• In the EE Control Panel, click Admin tab, then Weblog Administration, then Custom Weblog Fields.
• Click the Create a NewWeblog 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.
• EE 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.

You can reference the EE documentation for Custom Fields in addition to my steps below.

We need just one additional field, so here’s how to add it:

• In the list of 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.
• 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 how 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, 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 p tags, which is appropriate for our intended use.
• Let’s leave the formatting field set to Display Formatting Menu 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 EE, 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—“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 Home Weblog will not use categories, so leave Category Group set to None.  If Status Group 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 its static form on the site/index template into weblog posts.  Here’s how I’d go about it:

• Click the Templates tab and find your site/index template.  Click its name to open it for editing.
• In our example template, the main page content starts under div id=“left_side”.  The h2 tags 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 img tag, down through the unordered list just above where the left_side 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 img 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 site/index template in your browser, you should have the About Us header with an empty content area.

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

• Choose Publish, then Home.
• Enter a title of something besides “About 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 let’s take half of that back.
• Find the div class=“textbox” in the middle of that block of text, above the “Our Assets” h2 tag.
• Select from there to the end of the text and cut again – which should remove this small chunk of code and put it back on the clipboard.
• You should be leaving the image code and four paragraphs of text including the blockquote in the Page Body field.
• We have the field formatting set to XHTML, so we need to pull out all the p tags, otherwise we’ll get double tags on the rendered page. Pull them out of the blockquote as well.
• I’m going to re-format the CSS file to make it so p class=“mpnull” inside the blockquote is unnecessary, as this would have to be assigned manually by a client/user.  I can use a #maincontent blockquote p declaration to apply the same formatting as “mpnull” would to paragraphs inside a blockquote.

• Once you have the p tags removed, save the entry by clicking Submit.
• Now create an “Our Assets” entry by choosing again Publish, then Home.
• Enter a title of “Our Assets,” then again paste in the code from your clipboard.
• Let’s just lose the div class=“textbox” altogether, leaving this post containing the two paragraphs and the unordered list.
• Remember again to remove all the p tags.
• Also, remove any spacing around the ul and li tags; make sure they are flush-left with only one carriage return between them.

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 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.

You should take the time to review the EE documentation for the exp:weblog:entries tag.

Here’s the code of the final site/index template.  Take a look at the code and then we’ll work through what’s going on:

OK – here is what’s happening with the exp:weblog:entries tag:

• Weblog parameter—since we want entries only from the Home 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 exp:weblog:entries tag that you don’t need.  The more you can disable the better your performance will be—see the EE documentation for more information on the disable tag.
• Sort parameter - the exp: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.

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 EE into the site design.  The rendered page is the same but the site/index template is vastly simplified and our content now stored in a database for ease of updates.

The Results
You should be able to load the Home page of your site and have it display the content now coming dynamically from EE.  The key here is that you want it to look exactly the same when you refresh.  Here’s my working example.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Add Your Comment

Comment on this Post

1. Name:
2. Email:
3. URL:
4. Comment:
5. Remember Me?
6. Email Notify of Response?
7. Enter this word:
   In this field: