I’m pleased to announce that I’ve added a blog to Train-ee.  The Train-ee.com blog will be the home of a new Building an ExpressionEngine Site Series, this time covering the build of a church website.  You can read the full announcement over at Train-ee.com.

You’re working with ExpressionEngine and you’re not visiting the EE forums on a daily basis - gleaning tips and tricks to use in your project sites?

For shame.....

Yea - I know...there probably aren’t many of you coming here to Boyink.com and not also perusing the EE forums - but just in case I want to make sure you don’t miss an opportunity to Win a Building an EE Site Book via a giveaway sponsored by EllisLab.

Just post a reply in the associated forum thread to be entered into a drawing we’ll do over the weekend.  You can choose either the eBook (selling currently for $25) or the printed version ($29 + Shipping).

Good luck!

Prefer print?  Or not so big on PayPal? 

The Building an ExpressionEngine Series - Small Business book is now available in print form via Lulu.com:
http://stores.lulu.com/train-ee

Make sure to purchase both the CD and book so you get the text versions of all the companion files mentioned in the book.

The CD also includes the EE Control Panel Overview screencast (viewable with a web browser setup with javascript and Flash).

Yes - you’ve read the the weblog series, now own the book!

By popular demand, I’ve culled the “Building an ExpressionEngine Site” weblog posts out, and have compiled them into a downloadable eBook for your reading pleasure.

First - make no mistake - I fully intend to leave the weblog series here on Boyink.com.  If you can derive value from them and jump-start your EE development, use them with my regards.  I had fun writing them, and have received a ton of comments, links and search engine traffic from them.

So why buy the book?

A few reasons:

• The content is aggregated into one document for ease of printing.
• The sample site is assembled on its own (rather than as part of Boyink.com) which allowed me to organize the templates better.
• The Weblog names are semantic and simpler.
• Image paths are simpler
• I’ve added dozens of screen captures to make processes clearer.
• EE variable names, EE tags, and HTML appear in more complete form.
• The content has been revised and edited for clarity and accuracy (the blog posts could really be considered rough drafts in a formal writing process).
• All templates used in the book are included as text files for ease of copying into EE
• Purchasing the book will give access to the new Train-ee forums for support.
• I’ve promised each of my kids $0.50 for each copy sold (think of the children!)

The last bit is true, actually.  What started as a simple Saturday project to pull the blog posts into a Word document turned into a 50-hour project involving both myself and my wife putting in weekends and late nights to complete.  I decided the kids were really making a “business investment” into the book - giving up time with parents - so decided to cut them in on the profits. 

Just to be clear, however - this is a self-published book that hasn’t been through a “formal” editing and review process.  What it did get was the close, detailed editing that my wife can do - even more valuable because she’s not as familiar with the inner trappings of EE.  The content is much better for her input - with much more accurate references to the different links, buttons and section names found in the EE Control Panel.

So - if you learn better by reading, if you’ve found the Building Series helpful and would like a way to “give back” - buy the Building an ExpressionEngine Site - Small Business book now available on the newly-launched Train-ee.com.

Call it a New Years Resolution, call it a last-ditch-2007-effort, but at any rate, at the end of this chapter you can call this tutorial series “done”.  In the last chapter we worked through the weblog implementation, and it was a pretty heavy chapter with the most advanced code in this entire tutorial.  This chapter won’t be like that…

Sidebar Latest News
This really should have been part of the Weblog implementation in Chapter 15, but that chapter was long enough already.

The goal with this sidebar widget is to do two things:

• Allow a client to update several pages or sections of the site by the publishing of one post.  This is one of the great advantages and “sells” of a system like EE - that the finished site can not only be updated by an end client but the process is simple and updates are leveraged through reuse across the site.
• Give greater prominence to the most updated/freshest part of the site.  From a user perspective you are helping them easily find the latest and greatest content by bubbling it to the home page and every other section of the site.

Implementation here is pretty straight-forward.  You’ll need to edit your existing placeholder Latest News embedded template to add the code I’ll give you.  You’ll need to tweak the paths and category parameters and then save the updated template.

The Latest News Template
Here’s the text version of the Latest News template: chapter_17_latest_news.txt.  This code should be pasted into your existing latest_news embedded template.

Tweak the Template
Let’s look at the code here as we’re doing something a bit new:

Overall this is a pretty straightforward use of the workhorse exp:weblog:entries tag. Note the dynamic="off" parameter again used so that EE will ignore the current URL when building the results for this tag.  The important parameter here is the “category=130”.  This limits the results of this tag to just entries in that specific category - which happens to be the “company news” category for me.  You can either remove this parameter to display all weblog posts, or change it to reflect the category ID of your Company News category.  You can find that ID by visiting the category management interface for your weblog category group in the Control Panel.  If you click the add/edit link for your group, the ID’s will appear at the left of the list.

You’ll also need to change the link to reflect the names of your template group and weblog comments template.

Note that I’m again using some of the plug-ins we covered in Chapter 13 to format the Latest Products sidebar content.

Once you’ve made your tweaks, save the template and re-visit your site.  The new dynamic content should appear (this is always one of those moments I really enjoy working with EE - one saved template and most of the pages on my site are now updated showing real content).

The updated sidebar can be viewed on my sample site.

The Contact Form
Most business sites will want - in the very least - a simple contact us form and ExpressionEngine can handle that with out-of-the-box functionality.  If your needs are more advanced—wanting to save form submissions in a database table, more advanced error checking, user messages, etc then you’ll want to look into the popular FreeForm module from Solspace. 

Note: the Email Module isn’t available in the Core version of EE so if you’re following along in Core you’ll have to skip this step.

Here’s what you’ll need to do to get a basic contact us form working with EE code:

• Turn on the Email Module
• Copy my Contact Us template
• Tweak the template
• Update your main navigation
• Test

Turn on the Email Module
The Contact Us form requires the ExpressionEngine Email Module, which isn’t installed by default.  To install it, visit the Modules tab in the EE Control Panel, and the Email Module will show up around #4.  Click the “Install” link to enable the Email Module.

Copy the Contact Us Template
Grab the Contact Us template: chapter_17_contact.txt.  Note that this template is largely based on the example from the EE docs.  Create a new template in your main template group, and paste that code in.  I’ve named mine chapter_17_contact.

Tweak the Template
You’ll need to edit the “assign variable” at the top of the template to specify the name of your embedded template group. 

You’ll also need to make some changes to the opening exp:email:contact_form tag. Put the email address you want to receive the email in the “recipients” parameter (I’ve put a fake one in the text file to avoid the spam-bots) and tweak the “return” parameter to specify a URL that’s appropriate for your site:

Update Main Navigation
You’ll now need to edit your main navigation embedded template.  Here’s what mine looks like now:

Test the Form
Load the form in your browser, and give it a whirl.  If the email doesn’t come through, try sending yourself an email using the Communicate tab of the Control Panel.  If still no go, you might need to visit the email configuration section found at CP Home > Admin > System Preferences > Email Configuration, and have a conversation with your webhost about which email protocol to use.  With Boyink.com on EngineHosting I’m using the PHP mail option successfully.

CAPTCHA’s for Contact Us Form
The template provided has the code for CAPTCHA’s, but you have to enable them before they’ll show up.  The setting is also found on the Email Configuration screen of the Control Panel.  Set “Enable CAPTCHAs for Tell-a-Friend and Contact emails” to Yes.  And remember -they won’t show for you while you are logged in.  I’ve found it easiest to debug/test CAPTCHAs by being logged in in one browser (usually Firefox) and logged out in another browser (IE).  This way you can make template tweaks and see the changes without constantly having to log in and out.

I’ll Show You Mine...
Here’s my contact form: http://www.boyink.com/splaat/building_series/chapter_17_contact/

Hooking up the Search Engine
And for my final trick...hooking up the EE search engine.  But first, some caveats.

ExpressionEngine’s supplied search engine doesn’t function like high-end search engines in that it doesn’t roll through your site, looking at and indexing your rendered pages.  In my mind I think of that as an “outside-in” search, where a spider would just see your site as a collection of HTML pages as it comes out in the browser.

EE’s search is more of an “inside-out” approach, where it searches at the database level first then, when it finds a match, needs to be told where that database content is supposed to show up on the site.  Because of this there are some inherent limitations that will affect your results:

• Content that is re-used will not get multiple hits.  For example - if your search contained words that were contained in the “Latest News” sidebar we created above, an outside-in engine would return hits for every page/section on the site.  EE’s inside out will return one hit, mapped to the weblog comments template for that weblog entry.
• Content in our Miscellaneous Weblog cannot be searched.  We’ve used this weblog to hold snippets of text that get reused around the site, but they don’t have a “home template” for us to map EE to, so it’s best to exclude them from the search.
• Category content cannot be searched.  EE 1.6.1 has increased category capabilities with it’s category custom fields, but anything stored at the category level isn’t currently included in the search.

At times these limitations are more than I prefer - which is why here on Boyink.com I’ve used a custom Google search instead, and also why I logged this feature request for a new search engine for EE.

I should also point out - typically I will create a new template group for the search results,no results and css templates.  In this tutorial I’m keeping them all in the main template group for the sake of simplicity.  You should be able to organize them differently if need be - just look for places where template and template group names are specified and update them accordingly.

Having Said That
Let’s again implement the native ExpressionEngine search engine, and you can decide if it meets your needs or not.  To fully implement the search function, you’ll need to:

• Update your search & section heading embedded template to include the EE simple search tags
• Create a template that loads when there are no results
• Create a template to display results

Updating the Search & Section Intro Template
In your embedded template group, you should have a template called search_section_intros that contains the code for the search box & submit button.  Open it for editing, and copy the updated code in from this text file: chapter_17_search_section_intros.txt.

Let’s look at what’s going on with the search-specific code:

With this code we are using the ExpressionEngine Simple Search tags.  There is also an Advanced Search tagset which I don’t think I’ve honestly ever used.

The parameters you’ll need to tweak are the names of the weblogs, and the names of the no results and results templates - which we’ll load next.  The other parameter you can look at is the “search_in” - I’ve set it to everywhere since we have comments on this site. 

The important thing to remember when integrating the EE search tags with an existing design is that the style can be provided by the design through the use of the name and class parameters, but EE needs the “name=keywords” to stay. 

OK - save the updated code in that template and let’s load up the results and no results templates.

No Results Template
For these I typically just create a dedicated template, but again use the Miscellaneous_Content weblog as a source for the messages that are displayed.  This approach lets my clients control those messages easily.  So to get this working we need to:

• Load and tweak the no results template
• Create two new entries in the Miscellaneous Content weblog
• test

Copy the No Results Template
Create a new template in your main template group, and paste in this code :chapter_17_noresults.txt.  Tweak any of the necessary names and paths and save it.  I’ve got it named as chapter_17_noresults.  If you name it differently you’ll need to go back into the search_section_intros embedded template and update the search tag parameter with the new template name.

Create New Miscellaneous Content Entries
The new no results template assumes two new entries:

• The section header entry that appears next to the search bar in the green area.  This entry needs a url_title of “please-try-again”.  Enter some text and save.
• The body content.  The entry needs a url_title of no-results.  Enter some sort of sympathetic “we’re sorry” text and save.

Again remember that if you’ve specified url titles using underscores rather than dashes the url titles parameters in the template will need to be tweaked to suit.

Note that this template doesn’t exist in the main navigation for the site, so I’m passing an empty string to the main navigation for the location value.  This ensures that the main navigation isn’t “lit up” for this template.

Test
You should now be able to test your no results operation.  Re-visit your site, refresh the page to ensure you’e got the latest,and enter in a non-sensical search term that you know doesn’t appear on the site.  You should get the new no results template as a result, with the messages you created in the Miscellaneous Content weblog.  Here’s my rendered no results template: http://www.boyink.com/splaat/building_series/chapter_17_noresults/

Search Results
With the no results handled, let’s move on now to the search results.  We’ll be using the Search Results tag, but implementing it in a vastly simplified fashion that just feels better for this site.  I did a small amount of CSS work for the results, so you might want to again grab the latest version of the stylesheet:
http://www.boyink.com/splaat?css=building_series/stylesheet/

Our process here will be:

• Loading up and tweaking the search results template
• Creating a “results found” entry in the Miscellaneous Content weblog?
• Going through our weblog configurations, making sure the search results path is specified, and the excerpt field is specified.

Create the Search Results Template
Create a new template in your main template group.  I’ve named my “chapter_17_search_results”.  You can name yours differently but again you’ll need to go back and edit the parameters on the simple search tag.  Here’s the code to paste into this template: chapter_17_search_results.txt.

Paste that into your new template, and tweak any names/paths necessary for your installation.

You’’ll note that we have a couple new variables being displayed on this template - one for total hits and one that displays the keywords that were passed to the search:

You’ll also note that each result has a couple of variables in each list item - and these we need to look at more closely:

First let’s tackle the auto_path.  This variable is where EE holds that mapping of database content to template location I spoke of earlier.  If you look at the docs for this variable you’ll see that it’s set in the Weblog Management area for each weblog.  So let me provide you a list of how I’ve setup each weblog for this tutorial, and it’s Search Results URL setting:

• Building Series About
  http://www.boyink.com/splaat/building_series/chapter_17_about
• Building Series Homepage
  http://www.boyink.com/splaat/building_series/chapter_17_index
• Building Series Products
  http://www.boyink.com/splaat/building_series/chapter_17_product_detail
• Building Series Services
  http://www.boyink.com/splaat/building_series/chapter_17_services_detail
• Building Series Weblog
  http://www.boyink.com/splaat/building_series/chapter_17_comments

Basically - where the section is configured with single-view templates I link to them.  If there is no single-view template, I link to the multiview - knowing that when the search results are formatted EE will append on the url_title which will have the effect of making the multi-view template display only the one entry.

Nw let’s tackle the excerpt variable.  This is also a per-weblog setting, and is found in Weblog Administration > Weblog Management > Administrative Settings > “Which field should be used for search excerpt?”

Typically I just pick the field that will, on average, have the most content for that weblog.  For our weblogs above it’s the page content field for the Home and About pages, the description field for Products and Services and the Body field for the weblog.

With those configurations saved you should be able to use your search engine with terms that you know appear in the content, and get results.  The results should have links that take you to that entry on the site, using the template you’ve specified.

Keep In Mind
Keep in mind that, on the search results template, you can use conditionals and “nearly all” of the variables etc from the weblog:entries tag - in addition to plug ins, etc.  I’ve built more complex search results templates with these extra tools that in the end performed a bit better than the defaults - but at least you know have a starting point.

You can view the search results template in action by doing a search on the Chapter 17 site.  I’d suggest the keyword of “car” for a few results.

Are Your Fields Searchable?
Not seeing the results you expect? 

Here’s another thing to remember: each field in EE is configurable to be searchable or not.  Now would be a good time to run through all your fields and make sure they are configured properly.  The setting can be found in Admin > Weblog Administration > Field Groups > Custom Fields.  Choose your field group, then your field.  Scroll down to where it says “Is field searchable?” and make sure that it’s set to “Yes”.

Updating the Footer
Oh - one small change I hadn’t noted anywhere.  Now that the site’s main sections are fully implemented, you can go back to the Miscellaneous Content entry that’s holding your footer content and update the links.  I got rid of the links to the HTML and CSS validator in order to make room to replicate the main navigation with text links.

And With That...
Five months to the day of starting this series....we’re done!  I’ve had a good time writing this, and have benefited greatly with encouraging comments, emails and links (thanks to all of you for your kind words).  My Google page rank has gone up, and I’ve gotten some good PR over on the ExpressionEngine blog and forums. 

But it has been a ton of work with each chapter being a few hours in the making - so I am glad to be done. 

I am, however, more convinced than ever that there is still a great need for EE tutorials and training, and have some not-quite-fully baked ideas for some more work to that end.  Stay tuned!

Back to Chapter 16

Author’s Note: My apologies - I accidentally deleted this entry while working on chapter 17.  I was able to retrieve the article text from my rss feed, but lost all the original comments.

Yes, finally, I’m back with another chapter in the Building an ExpressionEngine Site series.  It’s been a couple of weeks since our last installment - but with the holidays plus negotiating for my new job with EllisLab and other projects going on, this one took awhile.  Also - and this is a good heads up for those of you new to implementing sites on EE, weblogs will always take longer than other sections of the site.  Why?  Simply because they require more work - more templates and more formatting. 

However, as always with EE, there are a number of ways to implement a weblog with EE.  Let me explain at a high level the approach I’m taking here and you can decide if it meets your needs or not. 

Weblog Implementation Overview
Most weblogs will require a number of templates - however, depending on your requirements and expectations of traffic to a weblog you can make some choices that will save you some time and trouble on the front end.

Weblogs being, well, weblogs, they usually have the following needs:

• An index template that comes up by default, and shows the last x number of posts with the newest at the top.  If there are longer posts, often this template only shows part of the post and has a “read more” link of some sort, which leads to the…
• Single-view template that shows an entire post
• Comments template where users can respond
• Permalink template which places this post at a specific URL that won’t change as new content gets added to the weblog
• Category Index - if the weblog posts are categorized, this view shows the latest posts assigned to the desired category
• Archive - most often this is broken down by month
• RSS or Atom feed

Quite a list. 

However - especially for weblogs like we’re building that are part of a business site (rather than really being the entire site) we can repurpose one template to serve multiple needs.  In this tutorial we’ll accomplish the weblog implementation with three main templates and a few new embedded templates.  The three main templates will be:

• Weblog Index.  This will serve as the default index view, the category view and the archive view
• Weblog Comments.  This will serve as the single-view, comments, and permalink template.
• RSS feed.

Working Model
Here’s a link to the working model weblog that this tutorial covers: http://www.boyink.com/splaat/building_series/chapter_16_weblog/.  Play around with it, and note where all the links go.

If your blog is busier, has deep archives, or you want a different category view, you might consider dedicated templates for those purposes.  I prefer to start simple so for most clients just getting into blogs will start with this approach and modify it later based on actual need. 

Onto the build!

Create Data Structures
To begin, you’ll first need to get the EE data structures in place.  You’ll need:

• A new weblog.  In my case and in all the sample templates I’ll be providing this is called “bees_weblog”.  Make sure commenting is enabled.
• A fieldset.  I’m using the default field set that installs with EE so will have fields of body, summary, and extended.
• A category group.  I created a weblog-specific category group called “bees_weblog” with categories of Company News, Industry News, and Ramblings.  I entered short descriptions for each.
• Remember to assign the new category group and field group to the new weblog.

Do Some Data Entry
Go ahead and make some entries in your new weblog - at least one per category.  Make sure to use all the fields so you’ll know if your templates function correctly.  Oh - and also post a new section heading type thing into your miscellaneous_content weblog.  Make sure it has a url_title of “weblog”.

Load the New Main Templates
Here are the new templates you’ll need.  Let’s get these and the new embedded templates loaded up and working, then I’ll go through and hit the highlights.  I’ve done a bit of higher-level coding in these both to save you some time tweaking them and to demonstrate the use of EE variables.  Here are the three main templates.  These should go in the same template group as the other main templates in your site:

• Weblog Index (saved as chapter_16_weblog in my example site): chapter_16_weblog.txt
• Weblog Comments (saved as chapter_16_comments in my example site):chapter_16_comments.txt
• RSS (saved as rss_2 in my example site). Note that this feed has been modified so that it will display HTML. rss_2.txt

RSS Template
Make sure when you create the new template for the RSS feed, you choose “RSS Page” in the “Template Type” drop-down.  If you forget while creating the template, just click the “preferences” link for the template group you put it in, and change it there.

Load the New Embedded Templates
The weblog index and weblog comments template share some right-column elements, so I’ve pulled these out and saved them as embedded templates.  Here are the ones you’ll need.  Save them into the template group holding the rest of your embedded templates:

• Weblog Categories (saved as weblog_categories): chapter_16_weblog_categories.txt
• Weblog Monthly Archives (saved as monthly_archives):chapter_16_monthly_archives.txt
• RSS link (saved as syndicate_block):chapter_16_syndicate_block.txt
• Comments form (more on why I embed this later) saved as weblog_entry_comments:chapter_16_weblog_entry_comments.txt

Grab the Updated Stylesheet
We’ve several new content types now, and I had to create entries in the stylesheet for them.  Make sure to grab the latest version: http://www.boyink.com/splaat?building_series/stylesheet/

Update Main Navigation
Remember to update the embedded template that contains your main navigation.  Mine now looks like this:

Specifying Names with Global Variables
OK, with those new templates loaded you’ll need to make and name or pathing changes required for using them in your environment.  If you’ve been following along with this series, you’ll have done this several times, changing the code of the embeds to reflect the name of your specific template group holding your embedded templates.

But don’t do that yet.  I’ve made this easier, and want to explain how.  First open the weblog_index template.  See where it has the following code:

What’s that all about?

These are Dynamically Assigned Global Variables, although don’t let the “Global” world fool you.  Like the docs state: “Variables created this way are available for use anywhere within that template.”

Essentially you can think of these as “text-replacement” variables.  As EE parses the template, it will store the text you specify in the “assign_variable” statement, and then anywhere it runs into that variable name in the rest of the code template, EE will swap out the variable name for the text.  For example, we’ve specified “building_series_ch16_embeds” as the value for “my_embedded_template_group”.  Later in the template, when EE finds:

EE will substitute the text we specified and see that line of code as:

Got it?

Cool.

Why did I use them?  Two reasons:

• First, to make it easier for you to move these templates into your environment.  Rather than having to edit several lines of code, now you can just make the change in one spot and the rest of the template will use that updated variable value.
• To get you thinking about more advanced coding methods like this.  Depending on your specific EE project, using things like Global Variables can make it easier to get your work done by centralizing templates that do the same thing but for different areas of your site.

So - take a moment now and edit the values of those variables in both the chapter_16_weblog and chapter_16_comments templates where appropriate. Once saved, the templates should load and function properly.

Building Links Using a Combination of Variables
With the global variables in place, now it’s possible to build links using a combination of true Global Variables, template Global Variables, and content from a weblog entry.  Consider this link:

Passing Global Variables to Embedded Templates
OK, take a deep breath.  This will be the most complex part of this chapter, and possibly this entire tutorial series. Go do some carbo-loading if need be.  Ready?  OK. 

Here’s the situation.  The parent weblog index and weblog comments templates know some things that the embedded templates also need to know.  The embedded templates are building the navigation to the category and archive views of our weblog, which will use the index template for presentation.  The parent templates know the name of the weblog needed, the name of the index template and what template group it’s in, because we’ve specified those items as global variables.  But we have two embedded templates that will also need that information. 

What to do?  Well, we could just copy our “assign_variable” code from the parent templates to the embedded templates.  But that’s not very elegant, and increases the number of places to make edits if those values change.

The other alternative is to combine Global Variables with Embed variables.  This way, the variable is specified in the parent template, then passed into the embedded template for use there. 

Now just stop and think about this for a minute.  What we’ll end up with is an embedded template that builds, for example, links to weblog categories.  But the weblog name of where the categories come from along with the location of the templates it needs to link to are variables.  What’s this mean?  You now have a little “category-link-builder” that you could re-use across different parts of a site, even when the weblog is different or the templates it’s linking to is different.  I’ve used this approach here on Boyink.com—I have four main weblogs (the business blog, Jeep, Bantam, and Photos).  On each of them I wanted category navigation for the bottom of the page. With this approach I have one embedded template that builds that category nav, and I just send it the necessary weblog name, and template names it needs to link to.  Then, for example, when I wanted to pull category descriptions in addition to the category name, all I had to do was edit that one embedded template’s code, and voila - all four weblogs instantly see the update.

So how to do this?  The trick to remember is that in order to pass a Global Variable to an embedded template you have to change it’s name on the way.  For example, in our weblog index template we have:

While passing it to the embedded template (category navigation builder), the variable gets its name changed to “the_weblog”:

Then in the embedded template, the new name is used:

Also note that formatting with quotes etc. is very picky and particular while doing this.

OK- breathe easy. The hardest part is over.

Again, to summarize, with these templates you should be able to load them up, edit the global variables to reflect what you’ve named both the templates and your template groups (make sure to edit both the weblog_index and weblog_comments) and once saved, the weblog should function.

The Comments Form
Let’s take a look at the comments form now.  You might be wondering why, since I have only one weblog single view/permalink/comments template why I choose to embed the part of the page that actually displays the comments (the embedded template called “weblog_entry_comments").  Mainly it makes the parent comments template a bit shorter/cleaner, and it sets you up well for use with multiple weblogs.  Ever since building Boyink.com in this fashion - where I wanted to have a centralized comments form for use by four different weblogs - I’ve been doing it this way.  Comments are a bit of a pain to layout and style, so only doing it once for multiple weblogs is a nice way to go.

Lesse...what else is there with this Chapter.  Oh yea…

Highlighted Category Nav
Just for fun I used URL Segments along with conditionals to apply an active class to the currently viewed category.  You can see it action here.

Let’s look at that code:

All this does is compare the 4th url segment (which displays the category url title for the currently viewed category) to the category_url_title of each category returned by the weblog:categories tag.  When the condition is true, the class of “active_cat” is applied to that category name.  If your URL structure is different you may need to change what segment the code looks at.

Also - I’ve used another conditional to display an “All News Items” link under the category list.  This will only display of a category has been choosen.  Not a big deal - it just flags the user that they are looking at a category view and provides a link that’s a bit more clear than remembering to click the “weblog” main navigation item.

Monthly Archives
Aside from our trickery with the variables, the archive links are built using a straightforward implementation of the weblog:month_links tag.

RSS Template
The RSS template is also a straightforward copy/tweak of the template that EE installs with.  As mentioned above I did make the changes required for it to display HTML.

Zzzzzzzz
Still with me?  My eyes are bugging out a bit reading this.  I have a feeling I may need to re-visit this chapter, but since it’s been a while and since this is such a big chapter I’m going to put it live.  You can let me know in the comments if there’s something I didn’t explain clearly or if the templates didn’t load and work as expected.

Next up - barring the need to re-vamp this chapter - I’ll work on the Contact Us page.  That should be really quick and easy compared to this one.  Past that all we’ve got is the Search and Search results to get going.

Back to Chapter 15.
On to Chapter 17.

So in Chapter 14, we implemented the Services section of our model site, and assigned those services to the same categories as our existing Products.

In this chapter, we’ll display Services related to Products on the Products category pages, and Products related to Services on the Services category pages.  Confused yet? 

We’ll need two new embedded templates (one each for related products and related services), and we’ll need to edit the two existing category templates for those sections. 

Note that the full-text versions of the templates will be available at the bottom of this post.

New Related Services Template
This template will go on the Products category page, and pull in the Services that are assigned to the same category as the currently-viewed Products category.  The template is a simple one, and gets saved into your “embeds” template group:

This template is just a simple weblog:entries tag, with as much disabled as possible that returns an unordered list of linked titles.

But wait - don’t we need to somehow tell the tag what category we need?  There is the category parameter and we could grab the category from the url using segments and.....

Hold on.

I’ve found that just about every time I’ve started down the path of forcing the weblog:entries tag to display a specific category it’s been unnecessary.  Why?  Because EE is going to do it anyway.  The most important thing to note about this template is what isn’t there - and that’s the “dynamic="off” parameter that is usually required for sidebar content to display correctly. 

In this case, we want the weblog:entries tag to be dynamic, as then EE will dynamically grab the category from the URL and use it filter the list of services to just the ones that are the same category group as the products being displayed.

New Related Products Template
Got it?  Good.  Let’s make another one - this one to pull in products that are in the same category group as the Services category being displayed.  Save it into your “embeds” template group as well:

Editing the Products Category Template
Now all we need to is add our new Related Services embedded template into the existing product_list template.  Let’s put this new content at the top of the right column so it won’t be missed:

Editing the Services Category Template
And same with the existing services_list template, just embedding the related_products instead:

The Working Example
Ready to see this in action?  OK - let’s look at two sides of the same category - Accessories.  First, here is the Products List, showing our Accessories products in the main column, and related Accessories Services in the right column.  Now let’s flip to the other side - here is the Services List - showing the Services in the main column and the related Accessories Products in the sidebar.

I’ve seen a few posts in the ExpressionEngine forums wondering what Categories were really useful for - and I hope this shows one solid example.  Being able to group and relate content from different areas of your main navigation is often very handy to do - essentially letting you slice your site horizontally as well as vertically.  Keeping in mind that each weblog can have multiple category groups assigned to it and the possibilities grow even more.

Templates
Here are the full-text versions of the templates used in this chapter.  Note again that I have chapter-specific groups for my embeds, so you will likely need to edit those paths to match your setup.

• embeds/related_services:chapter_15_related_services.txt
• embeds/related_products:chapter_15_related_products.txt
• services_list:chapter_15_services_list.txt
• products_list:chapter_15_products_list.txt

Next up - beginning the Weblog implementation.

Back to Chapter 14.
On to Chapter 16.

In this chapter of the Building an ExpressionEngine site series I’ll work you through implementing the Services section of our example site.  Between using EE objects that are already created (field groups, category groups, etc) and copying/tweaking existing templates I can get you through it in one chapter.

Wa-a-ay back in chapter 3 we looked at the possibility of the Services section sharing a category group with the Products section. 

I think this is a good idea - as many businesses will offer a set of products and services that are related to each other.  Being able to show those relationships on the website would then be valuable - to ensure that clients/users can be fully served, and (from a business perspective) to not miss out on potential upsell opportunities.

Now I’ve gone and used the word “relationships” so I should take a moment and explain the approach here.  ExpressionEngine has a few different ways of - generically speaking - relating content.  One way is weblogs - if two posts are in the same weblog they are inherently related.  Another way is categories. Having two posts assigned to the same category establishes another content relationship between those two posts.  You can think of two posts in the same category as being more closely related than two posts in the same weblog but not in the same category.

New lets push it another way - category groups can also be assigned to more than one weblog.  So - if two posts are in different weblogs but assigned to the same category there is a relationship there that we can use to display those two posts on the same page.  This is the approach I’ll be assuming.

EE also allows more formal content relationships.  These formal relationships are also valuable, but are (IMHO) more advanced. I think it’s best to get a grip on the ins and outs of categories before looking at formal relationships.

Having said all that - this chapter will focus on getting the Services section implemented.  In the next chapter we’ll look at tying the Products and Services together from a presentational viewpoint.

OK - so here’s the overview list of what needs to happen for the Services section:

• New Services weblog, using existing field group and category group
• Content entry
• Template copying/tweaking
• New Section Intro post in Miscellaneous Content weblog
• Update main navigation

New Services Weblog
You’ve created a couple weblogs now, so I’m not going to walk through the specific steps (you can review earlier chapters if need be).  Just create your new weblog, and name it.  I’m naming mine with a full name of “Building Series Services” and a short name of “bees_services”. 

Once your weblog exists, use the “edit groups” link to assign it a field group of “simple_content” and a category group of “bees_products”.

Content Entry
Your new weblog is empty - so best to get some content in there before moving on.  Even if it’s “greeking” without some content you won’t really know if your templates are working or not.

Enter about a half-dozen posts, and remember to assign each one to a category. Two per category should work well.

Template Copying & Tweaking
Functionally the Services section of the site will be the same as the Products section; the index template will be a list of Services categories, clicking a category will return a list of the entries in that category, and clicking an entry will bring up the detail for that entry.

So let’s jump-start our template development by copying the 3 Products related templates: the index template, the product list template, and the product_detail template.  I’ve named mine in the following manner:

• chapter_14_services
• chapter_14_services_list
• chapter_14_services_detail

Now for the tweaking.

To the Index template I had to change the following:

• Page title
• my_location main navigation location flag
• my_url_title variable in the search section intros embed
• Weblog names
• Link targets
• Text in the “View Products” text link

Small Change of Direction - another Custom Category Field
I also removed the category photos and line manager information.  After reviewing the results, I’ve decided that the category description I wrote for the Products just doesn’t cut it for describing the Services.  I could re-write the description, but rather than making one description more generic I’d rather use another custom category field for describing the Services.  You may choose to do it differently.

I’ve added a custom field to the bees_products category group, called “services_description” (text area, no formatting).  I’ve gone back and added a services-specific description to each of my existing categories.  I’ve also changed out the field in the Services index template, trading “category_description” for the new “services_description”.

Back to Tweaking
To the chapter_14_services_list template I made the following changes:

• Page title
• Weblog name
• my_location variable
• the_url_title variable
• Weblog names in main weblog:category heading tag and weblog:entry tag
• Link targets
• Linked text
• Replaced category_description with services_description
• Got rid of the images, and just made linked titles

Note that you could, if you desired more content on this page, use a new custom field set for the Services weblog, and create a “summary” field to use here.  Or, similar to what we did with the Latest Products section, use the word_limit plug-in to pull the first 50 characters of text from the page_body field.  At this point I’m going to keep this page simple with linked titles to each Service description.

To the chapter_14_services_detail I made the following changes:

• Page title
• Weblog names
• my_location variable
• my_url_title variable
• weblog name in the weblog:entries tag
• changed fieldset in the weblog:entries tag

Download the new templates
Here are the three templates required for the Services section:

• chapter_14_services_index.txt
• chapter_14_services_list.txt
• chapter_14_services_detail.txt

New Post in Miscellaneous Content Weblog
OK - with those three templates in place the code is now looking for a Section Intro to pull with a url_title of “services”.  Since that doesn’t exist, we need to publish that into the Miscellaneous Content weblog.

Once that’s published and saved, if you refresh any of your Services templates they should load the new intro.

Updating Main Navigation
Our main nav still isn’t highlighting the Services section as active - and it’s not hooked up to the new templates.  Let’s fix that. In your main_nav embedded template you’ll need to to update the li for the Services section from:

to:

You can download the entire updated template here: chapter_14_main_nav.txt

With that change saved you should be able to refresh your site and get the main nav to light up, and be connected.

Here is the link to my copy of the updated project site: Chapter 14 Services.

Next up—we’ll modify the Products section to show related services for each product category.

Back to Chapter 13
On to Chapter 15

In this chapter of the Building an ExpressionEngine Site series, we will develop the right-column listing of “Latest Products”.  This is a spot where using a couple plugins will help negate the need for additional content fields for site admins to enter and maintain.

OK - so way back in Chapter 2 of this series we created an embedded template for the right-column listing of “Latest Products”, and it’s just been sitting there with static placeholder content in it.  Now that we have our Products section implemented all the necessary content is in place, we just need to re-coded that embedded template to now pull content from the “bees_products” weblog dynamically.  Once it’s working, the product content will immediately appear on all of our content pages because all of them have that template embedded—definitely one of those moments where using a embedded templates will shine.

Template Requirements
So let’s take a look at what’s going on in that Latest Products section (view the site from Chapter 12).  For each product there is a small thumbnail and a blurb of text.  Well, cool - we have both of those already in the Products weblog as product_thumbnail and product_description fields.

Hold on though. 

Our thumbnails are all currently 150px by 112px - quite a bit larger than the 59px x 54px thumbnails currently specified in the Latest Products code.  And - our descriptions are quite a bit longer than we really want in this right-column space as well.

What to do?

One option would be to create two additional fields in the “bees_products” custom field group - one for a smaller thumbnail and another for a short description.  Those fields could then be used in the Latest Products embedded template.

Workable, but that approach would increase the content required for each entry.  You would also have to train a content admin to know what fields show where on the site, and rely on them to create the thumbnails in each size correctly.  Overall - not an elegant solution - especially when the necessary content is already in ExpressionEngine, just not quite formatted to our liking.

The second option?

Plugins to the Rescue
Yes - it’s a good spot to use some plugins to extend the functionality of “out of the box” ExpressionEngine.  If you haven’t yet browsed the EE Plugin Library now is a good time to do so.  For our purposes today we’ll need two plugins from the library:

• Word Limiter
• HTML Strip

We’ll also be using a relatively new plugin that I noted recently in the EE forums - the Image Resizer published by user Lumis (Lumis I’ll gladly credit you by proper name if you want...).

Installing Plugins using the Plugin Manager
There are two basic ways to install plugins - using the Plugin Manager, and not using the Plugin Manager. 

Since the first two plugs we need are available in the EE library, you should be able to install them via the manager.  Note: This assumes you have entered your EE license number in the Control Panel under: CP Home > Admin > System Preferences > General Configuration.  If the license has not been entered, the list of available plugins will not appear when you browse to the Plugin Manager at CP Home > Admin > Utilities > Plugin Manager will not appear in the right column. To proceed you can either enter your license number, or install all three plugins via the second method using FTP.

OK - if the Plugin Manager shows (and neither the HTML Strip or Word Limit plugin is already installed), simply browse the list of available plugins until you find both of these and click the “Install” link.  The plugin should install and then appear under the left-column list of installed plugins.

Installing Plugins without the Plugin Manager
Regardless of how you installed the first two plugins, you’ll need to install the Image Resizer plugin using the approach because it’s not—as of this writing - offered via the EE plugin library.  To install this plugin:

• Visit the author’s site and download the plugin.
• Unzip the archive file to extract the plugin file
• Using FTP, upload the plugin file to your site.  It needs to go in the plugins folder, which is located in your EE system directory.
• The new plugin should now show in the installed list on the Plugin Manager page in your Control Panel

Using Plugins
OK, now what?

By installing plugins, you now have some additional tags you can use in your templates.  You can usually get details of the plugins-specific tags and parameters by clicking it’s title in the Plugin Manager page.  I’ll let you explore the different parameters of these specific plugins on your own, and just show you how I’ve used them here.

Working up the Template
OK - we could just jump to the finished product, but let’s take this in steps so can see the logic of using the plugins.

First-up - the template with no plugins, using our existing content.

Here’s the code - the weblog:entries tag will stay the same through all of these examples and is pretty straightforward. Limiting to 3 will get us the last 3 products entered, all unnecessary data is disabled for performance, and the dynamic="off" will ensure the last 3 products will appear no matter what page this code is rendered on.

And here’s the result.  It’s usable, but not as nice as the original template styling:

OK - let’s tackle that thumbnail size first.  Here’s the code modified to use the image sizer plugin.  You can see I’ve specified a fixed height of 54px, and the plugin will resize the image to the correct width dynamically:

And here’s the result.  Our images look better, but our text spacing is still off:

If you do a view/source and look at the rendered code, you’ll see that our main culprit is paragraph tags.  The product_description field is set to be formatted as XHTML - so that returns one set of P tags.  The template is also providing P tags - wanting to wrap each product’s image and text in one paragraph.  So let’s use the HTML Strip plug-in to remove the P tags from the product description field for round three:

And here’s the result:

Much better - no nested P tags coming out now.  But - some of those descriptions are long for that space. Let’s use the the word_limit plugin to truncate those down.  Here’s the new code - note that you can nest plugins for the desired results: