Three-Tier Static Content in ExpressionEngine: Approach B
This is the third installment in a series on building static content areas using the native functionality in ExpressionEngine. Previously I’ve covered a simple two-tier approach for content with an “index and sub-page” structure. Then I covered how to use EE categories to add a third level into the sub-navigation. That approach uses categories to organize the sub-navigation, but doesn’t provide true second-level category content. In this post I’ll show how to add that second level content using another EE template.
I’ve a working example of this approach for your perusal.
Once again I’m going to assume you have created the EE elements covered in the first two tutorials, and only cover the incremental differences to now move to this level of static content. To use this approach after building Approach A we need to:
- Enter category-level content.
- Edit the category archive tag in the Index template to add links to the new Category template.
- Create a Category template to display category content.
Enter the Category Content
For the category content we’ll use the additional Category field of Description. You can also use the image field, but I’m not for this tutorial. To add or edit the category descriptions:
- Navigate to the Admin > Weblog Administration > Category Groups area of the EE Control Panel.
- Click the “Add/Edit Categories” link next to your static category group.
- Click the “Edit” link next to a category.
- Enter content in the category description - this will essentially be the same as content in the “page_content” area of a weblog entry.
- Save your changes.
- Repeat for each category.
Edit the Index Template
All we need to do in the index template is edit the weblog:category_archive archive tag to add links inside the categories loop. Download the text version of the revised Index template to get the new code. You’ll note the links are to a template called “snow” - since my categories are different types of snow I named the category template to suit. You can change the link to point to a more aptly-named template for your needs.
Create a Category Template
Now that we have links pointing to a category template, we need to create that template. Download the text version of my category template and paste it into EE as a new template. Note that if you changed the links from “snow” to something else in the previous step, you’ll need to name the template to match in this step.
The main difference in this category template is the EE tag used in the content div. Rather than pulling a weblog entry, we’re using the category_heading tag to pull the category name, description and image fields. There is a simple conditional there that only pulls the category description if there is content in that field.
Note that the code that creates the left navigation is the same code as in the index template. I’ve left this so that these tutorial templates would be more self-contained, but in practice I’d pull that code, stick it in it’s own template, and embed it back into this template.
At this point you should have a working 3-tier static content setup in ExpressionEngine.
Advantages
- True three-level navigation and content
- Still pretty simple overall with two templates required
Disadvantages
- Two different content editing workflows, depending on the content level in navigation
- The category description field doesn’t offer the same formatting options as a weblog field, so either the content has to be simpler or clients need to enter some markup
- The category image field (not used in this tutorial) doesn’t offer a file upload or browse button, so image paths need to be entered manually - which isn’t client friendly.
Category Navigation
