Setting Up a Category List with the ExpressionEngine Weblog Categories Tag

I’ve taken just a bit of time to review the CSS and layout of the original site and made a few changes to clean it up a bit for the new version.  The detail of these changes are irrelevant to our ExpressionEngine focus in these articles, but the one thing I did change in my new template was to eliminate the includes/sidebar template and incorporate the left column into the includes/header_bottom template, since the sidebar will remain consistent throughout the site.  So, the new page template located at includes/index looks like this:

We now have our content and sidebar columns in place and are ready to continue rebuilding the site.  I’ll start by creating a listing of the topic categories that will appear on every page.  You can easily see this in the left column on each page of the existing site.  ExpressionEngine makes this simple with the weblog categories tag.  The basic tag looks like this:

However, we need a few parameters to tell ExpressionEngine which category list to show:

By specifying which weblog we want to show categories for, ExpressionEngine will display the categories for our topics.  I’ve also told the engine to add the class of “catlist” to the unordered list that it creates when it lists out the categories. By default, the system displays nested lists of all the parent and child categories that have been specified.  Since we only have one list with no children, all the categories are shown in a single level list. 

You can specify style=“linear” to override the nested UL default and add your own HTML code to the list of categories, but in this case, the default setup works fine.  There are quite a few other parameters you can use in the weblog categories tag that you can check out in the documentation.

To finish up this category listing code, I’ll add the link code to each item.  Recall from part 5 that we’ll want to use the

structure in the href call.  However, its not so straightforward this time.  I’ll show you the code and then explain it:

You can see that the category_name ExpressionEngine variable is wrapped in a typical link href but inside the quotes is the ExpressionEngine path code.  In this case, the format is template_group/category/category_url_title.  Since we will be using babyfilter.com/topics (actually babyfilter.com/topics/index) for the listing of all topics on this site, what this URL structure does is trigger ExpressionEngine to filter that complete listing based on the category URL title in segment 3 of the URL.

If its not clear yet, what I am getting at is that I only have to create one web page that lists the topics.  When the user visits the main topics page, they see all the topics in a list.  When they visit the same page with a specific category specified via the URL, they will only see topics from the category specified.  ExpressionEngine voodoo at its best!

How does this work?  The word “category” in the URL is the trigger.  This is specified, and can be changed, in CP > Admin > Section Administration > Global Section Preferences > Category URL Indicator.  If you change that word to “rabbit”, then the URL to show a specific category would be babyfilter.com/topics/rabbit/category_url_title.  When ExpressionEngine sees the trigger word in the URL, it looks to the next segment of the URL for the category you want to display.

So, go ahead and save the new sidebar code and upload it.  You should see the list of categories as links and each link will point to its correct URL with the category trigger.  An example of this in our case, for the category “Mobility” is www.babyfilter.com/topics/category/mobility.  Each category’s URL Title can be specified in the CP > Admin > Section Preferences > Category Management > Category edit page. 

In order to see this magic at work, we need some content.  I’m going to bring the content from the original website over.  This will require two steps.  I’ll need to create member accounts for all of the people who signed up for the original site, and then manually enter the topics and comments they created and assign them to the correct author.  Before the site relaunches, I’ll plan to email each user and let them know the site has been updated and what their new login information is.  Of course their content will be old, but its valuable none the less.  I won’t detail this “import” process as it is pretty mundane.

In the next article I’ll get our newly imported topics listed on the homepage, the main topics page and the individual topic pages.  For now, if you check out the staging site, you’ll see the complete list of categories I created.

Series Introduction
Previous Article in Series
Next Article in Series