Three-Tier Static Content in ExpressionEngine: Approach C
This is the fourth installment in a series on building static content areas using the native functionality in ExpressionEngine.
In this post I’ll show an alternate method of presenting three-level content in EE. The navigation model in this approach is less like traditional navigation and more like a weblog in that the category (2nd) level pages uses the main content area for blurbs with “Read More >>” links to the detail (3rd) level content. I use this approach sometimes because I like how it gives the user more detail as you move through the site. It’s also a nice way to get around needing category-index level content that often times says nothing more than “below this page are three more pages”.
I’ve been thinking all along that this is a “3-template” approach, but I’ve realized that if I created a new template group for this example it could remain a two-template approach. If you watch the urls used in the working examples you’ll note this example is now in it’s own “static-c” template group.
I’ve again posted both a working example of this approach.
As before, this tutorial assumes you’ve created the ExpressionEngine weblog, category group, and field group used in the previous tutorials and will cover the incremental differences only. To build off Approach B to Approach C we need to:
- Add a field to the Static Weblog
- Change how the left-navigation is built on both templates
- Modify the category template to bring in the blurbs for each detail page
Adding a New Field
The category pages in this approach will feature “blurb” or “page summary” type content for each detail page. To hold that new content we need to add a field to the Static Weblog:
- In the EE Control Panel, navigate to Admin > Weblog Administration > Field Groups
- Choose your “StaticPage” field group, and click the “Add/Edit Custom Fields” link next to it’s name.
- Click the “Create a New Custom Field” button at the upper left of your screen.
- Fill in the details for the new field. I’ve called mine “page_summary” and made it a textarea with 6 rows, with the formatting set to “None”.
- Save your new field
Changing the Left Nav
For this approach, since we’re moving the links to 3rd level pages into the content area of the second-level pages, we need to change the EE tag used to build the left navigation. We’ll now use the exp:weblog:categories tag - download the text version of new Index template to get the EE code. Copy/paste this into your EE index template, and make sure to change things where appropriate for different weblog, template, or field names.
Changing the Category template
Now we need to modify the Category template - we’ll leave the exp:weblog:category_heading tag in place to bring in the Category Name and Description, but you can also get rid of this if it doesn’t suit your purpose. Download the text version of the revised Category template, and paste it into as your category template in EE. You’ll see where there is now a exp:weblog:entries tag that brings in the Page Summary and a “Read More” link for each page in this category. A few notes about what’s going on here:
- You don’t need to add a category parameter to the weblog:entries tag - EE will do this automatically since we are on a category page.
- Our Index entry should never show on a category page because it’s not assigned to a category.
- The “Read More” links are pointing back to the Index template - which will load the Page Content for whatever entry you click on.
With the new field and revised EE templates in place, you should have a working static section with categories for subnav, and links to the detail pages on the Category templates.
- Left navigation stays simpler
- Category pages are more detailed
- Visitors get more info about a detail page than what just a navigation link can provide
- Works well for presenting content that breaks up into a categorized “summary/detail” structure
- Could be extended if necessary to use a 3rd template for the lowest-level detail
- Still simple in that only two templates are required
- Left navigation isn’t all-inclusive—you can’t jump directly from a 3rd-level page in one category to a 3rd-level page in another category
- Category pages have a different content structure than detail pages—may not work for all content types
Extending This Approach
I’ve purposefully kept things simple here just for the sake of the tutorial, but I’m can already see where this approach could be improved upon - and that’s adding “sideways” navigation to other pages in the same category when you’re on a detail page. That would be easily do-able using another exp:weblog:entries tag on the Index template, configured to use the Related Categories Mode. Since the Index content doesn’t have a category assigned this tag would not return anything, but while viewing an entry that’s been assigned to a category it would return links to the other pages in that category. You can see an example of this approach in action on this Client site - the second-level navigation are all EE categories, and the links on the bottom of the page are to other pages in the current category.