This is the sixth installment in the Building an ExpressionEngine Site Series, where we are working through implementing an entire small business type website on the ExpressionEngine content management system, using a free design template as our basis.  So far we’ve done a fair amount of behind the scenes template work, and have implemented the native content on the test site’s Home page.

From a Home page perspective, the items left to implement are:

• The search functionality - which I want to leave for later
• The Latest News block - which will draw from the Weblog so needs to wait until that section is implemented
• The Latest Products block - which will draw from the Products section so needs to wait until that section is implemented
• The Footer content - which can go in the Miscellaneous Content weblog implemented in Chapter 5

Note that since we’ve used embedded templates for the search, Latest News, and Latest Products we can implement them later, in one place, and they’ll immediately show up througout the site.

So let’s do the Footer, then start moving through the site’s main navigation by implementing the About section - since it’s both next in the nav and very similar in structure to the Home page.

Moving the Footer content to the Miscellaneous Weblog
Overall this is a very similar process to what we did with the page header blurbs or the Home page’s main content.  We need to:

• Copy the content in the current Footer embedded template
• Create a new post in the Miscellaneous Content Weblog
• Edit the Footer template to replace the static content with a weblog:entries tag to pull the content from the weblog post

Copying the Footer Content into a Weblog

• In the Control Panel, click the Templates tab, then select the template group that has all of your embedded templates.  For me (since I’m creating a copy of this group for each chapter) that group is called “building_series_ch6_embeds”
• Find your “Footer” template, and click it’s name to bring it up in edit mode
• OK, this is another point where the template’s HTML structure is going to change our ExpressionEngine implementation approach just a bit.  The footer is constructed from two paragraphs, one (the copyright) with a class of “right” which floats this content to the right.  I wouldn’t want clients to have to worry about applying that class to their content, so the easier way to implement this is to split the footer content into two seperate posts.  This way we can leave the p tags and the “class=right” in the template where users won’t have to worry about it.  So - select and copy everything between the first P tags - the copyright and the link
• Click the Publish tab, and choose the Miscellaneous Content weblog
• Enter a title of “Copyright”
• Paste the code into the Page Body field
• I’m going to update the copyright info with my company information.
• Since we have P tags in the template, we don’t want EE to apply any formatting to this content.  Move to the bottom right of the Page Body field and select “None” in the Formatting drop-down
• Click Submit to save the new post

Repeat the process above for the second paragraph of content in the Footer template:

• Leave the paragraph tags in Footer template
• Title the post as “Footer Links”
• Set the formatting on the Page Body field to “none”
• Make sure to note the url title that EE creates for you—you’ll need it later
• Save the new post

Modifying the Footer Template
Now we have two weblog entries to bring into the footer, and one of them needs to be handled differently by getting the “class=right” applied to its’ paragraph tag.  There are two ways that come to mind to do this: Use two weblog:entries tags, or one weblog:entries tag with a conditional.  I’m going to go with the second approach, as it’ll be less code and I think the overall performance of the weblog:entries tag and conditional will be better than two weblog:entries tags.

So again let’s look at the changed code for the template and work through what it’s doing.  Here is the text version: chapter_6_footer.txt

Starting at the weblog:entries tag there is:

• The weblog declaration - “bees_misc_content” in my case. Again remember this is the “short name” you’ve specified for the weblog
• The disable statement - again I’d highly recommend getting in the habit of disabling whatever you can on every weblog:entries tag for better site performance .  It’s much easier to do this as you go than having to work back through all your templates at a later date
• url_title="copyright|footer-links" parameter:  This is how we tell EE that we want only the two posts that comprise the footer content.  Note that the word seperator on footer-links could be different for you, depending on what you’ve specified under Admin > Weblog Administration > Global Weblog Preferences > Word Separator for URL Titles.  I have “Dash”, you could have “Underscore”.  Also - you could use entry_id instead of url_title.  I prefer url_title as it makes the code more readable, and if one of these posts should happen to get accidentally deleted, a new post with the same url_title could easily be published and the site would work again.  With entry_id, the template would have to be edited as the new post would get a new ID
• sort="asc" parameter: Because we entered the Copyright post first, by default EE will return it first, with the footer links on top of it.  We need it to be on top, or the floated content will have space on top of it.  By reversing the default EE sort order our content will be returned in the order the HTML needs it in
• dynamic="off": Required because this content needs to function independently of the URL for any given page
• if url_title=="copyright" : This is our nifty EE conditional, which will apply the class="right" formatting to only the copyright post.

The Results
Here is the rendered page - visually the same, but updated now our company info.  This footer content will now be editable via two weblog posts rather than having to muck about in the template code.

Implementing the About Section
Let’s start making that main navigation go somewhere besides the Home page, shall we?  The steps to implementing the About section will be:

• Creating an “About” weblog
• Publishing some content to it
• Publishing a new About page Section Intro in the Misc. Content Weblog
• Creating an EE template to display the content
• Updating the embedded Main Navigation template

Creating the About Weblog
We covered the exact steps for creating a weblog in Chapter 4, so I won’t repeat them in detail here.  Here are the specifics:

• Create a new weblog with a Full Weblog Name of “Building Series About” and a Short Name of “bees_about”
• Choose to duplicate the Home page preferences
• Assign it the default Status group
• Assign it to the same “Simple Content” field group as the Home page has
• I’m not going to have EE create any templates automatically, as I won’t need a whole group but rather just one template.

Publishing Content to the new About Weblog
In order to know that our templates are working right, we’ll need some content in this new weblog.  I’m going to publish three entries - one each for the company, the founders and the products.  Since there is nothing special required from these new entries and we’ve already covered the publishing process in this Chapter, I’m going to leave out the step by step details and assume you can get through it OK.

Publishing a Section Intro for the About Page
In Chapter 5 we implemented the white on green Section Intros using a new Miscellaneous Content weblog.  We’ll need another post in the Miscellaneous Content weblog to serve as the Section Intro for our new About section:

• Publish a new entry to the Miscellanous Content weblog
• Title your new entry “About” - so the url_title should be “about”.  We’ll need the URL title in the next step.
• Enter a description of the About section and save your new entry

Creating a New Template
With the new weblog in place and the new content published, let’s create the new template to display this new section:

• Click on the “Templates” tab in the EE Control Panel
• Find the template group that currently holds your index template, and click the “New Template” link in the second column.
• Enter a name for your template.  I’m going to specify “chapter_6_about”.
• Under “Default Template Data” choose the option to “Duplicate an Existing Template”, and choose the Index template that we’ve been working with
• Click Submit to create the template

So now we have an “about” template that’s a copy of the current index/Home page template.  We need to edit that template to get it to draw out our new About content instead of Home page content.  Here is the text version of the template - open it so we can look at it:chapter_6_about.txt

Wow - looks very similar to the Home page template, no?  All that had to change was:

• In the embed statement that brings in our section intros change “the_url_title” to specify the new “about” entry.
• In the weblog:entries tag, change the weblog from “home” to “about” ("bees_home" to “bees_about” in my case specifically).

Note - since the Index and About templates are so close in content they could be actually be combined into one template, using url segments and conditionals to tell EE what content to pull based on the URL.  Since this tutorial is geared towards people new to EE I’m going to stick with the simpler-to-understand approach of seperate templates for each.

Save your changes, and click “View Rendered Template”—you should get something like this.  This is a good time to grab the URL so that we can update the link in the embedded main navigation template.

To do that:

• Click the Templates tab and find your embedded templates group
• Find the main_nav template and click it’s name for editing
• Find the link to the About page and paste in the URL. I usually start from /index.php/ (or /splaat/ here on Boyink.com).  For me the url then is “/splaat/building_series/about/”
• Whups - we also need the home page link.  Just paste in the same thing and remove the “about” so it refers to the index template instead.  My link is going to be a bit different since I have an chapter-specific index
• Save your changes

Here’s a copy of my updated main_nav template: chapter_6_main_nav.txt

And here’s a link to the new index page, with dynamic Footer content and an About Section:
http://www.boyink.com/splaat/building_series/chapter_6_index/

And yes, I see the same issue that you’re probably noticing.  On the new About page the main nav isn’t showing the About tab as being active so it looks like we’re still on the Home page.  We also are lacking a specific page title.  We’ll address both those issues in Chapter 7—again making use of embedded variables and conditionals.

On to Chapter 7.
Back to Chapter 5.