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.

 
Download the EE Code for Three-Tier Static Content in ExpressionEngine: Approach B

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

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Thursday, July 23rd, 2009
Comment: #1

This is exactly what I was looking for. Excellent ideas.

I do have one question though - what happens if you have two weblogs you wish to display? Is there an easier (ergo: dynamic) way other than repeating the code twice on the template?

At the moment, this is how it would appear in the template from how I understand it:

{exp:weblog:category_archive weblog=“weblog1” style=“nested” show_empty=“no”}
  {categories}
    {category_name}
  {/categories}

  {entry_titles}
    {title}
  {/entry_titles}
{/exp:weblog:category_archive}

{exp:weblog:category_archive weblog=“weblog2” style=“nested” show_empty=“no”}
  {categories}
    {category_name}
  {/categories}

  {entry_titles}
    {title}
  {/entry_titles}

{/exp:weblog:category_archive}

Is there any way to make the above dynamic, so that instead of having to update the template each time you add a new top level weblog, the loop handles it completely?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, July 23rd, 2009
Comment: #2

Hi Andrei -

I haven’t run into this as a requirement - typically I only have one weblog per “static” section where I’m building nav in this fashion.

Adding weblogs usually means the site is being modified in a substantial fashion (which has rarely been the case when I’m done and client takes over) - so a few minutes of template editing isn’t a big deal.

You could probably embed out the category archive loop into a separate template and send in the weblog name as an embed variable, but you’d still end up modifying the parent template to specify the new weblog and embed statement.

The only way I know where EE would just automatically pick up new posts from a new weblog is by not specifying *any* weblogs on the weblog entries tag. 

The category archive tag however requires a weblog name as a parameter and only accepts one weblog.

Picture of Ryan Ricci

by Ryan Ricci

Date: Friday, October 29th, 2010
Comment: #3

Would you still use this method or would you migrate to the page module?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 29th, 2010
Comment: #4

Overall I have no great love for the Pages module.  Most of my clients would be confused by having to create the URL title, and I also don’t like exposing the list of templates (where there is only 1 right choice and many wrong).

Picture of Ryan Ricci

by Ryan Ricci

Date: Friday, October 29th, 2010
Comment: #5

Mike just wanted to say thanks for the quick responses.  You gave me exactly what I needed!  Thanks for the warm welcome to the EE community.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 29th, 2010
Comment: #6

Sure!

Picture of Ryan Ricci

by Ryan Ricci

Date: Friday, October 29th, 2010
Comment: #7

If we are going to use EE 2 should I still used these 3 posts to build out what I am trying to do or have you wrote something new covering this approach in 2?  I understand channels have replaced weblogs.  I don’t know what else I would have to be aware of as it stands right now.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 29th, 2010
Comment: #8

See this page for EE 1 to 2 differences.

Picture of Ryan Ricci

by Ryan Ricci

Date: Tuesday, November 2nd, 2010
Comment: #9

When using this approach is there anyway to have a wysiwyg editor instead of the text area for the page content?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, November 2nd, 2010
Comment: #10

Yes - look on devot-ee.com for such editors.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>