Enhanced Category Pages in Expression Engine

Published: June 04 2013, by John

In our last blog post Client Friendly CMSs I wrote about the importance of making it easy for clients to be able to keep their website up-to-date, by ensuring the admin area is as user-friendly for the site managers as the front end of the site is for their visitors.

I mentioned that I've never been overly keen on Categories in Expression Engine and often find them cumbersome and not as flexible as the main Channel Entries features.

My reasons for not liking categories are twofold:

1. From a development perspective it always seems much more difficult to display category listings in just the way you want to, compared to Channel Entries which are always so flexible and pleasing to work with.
2. Probably the key reason: the user management for Category fields is really poor. While you can add custom fields, you're limited to basic text areas. This isn't something we're happy handing over to most clients and I can't wait for the day when Expression Engine overhaul the Category module to allow for multiple images and custom fieldtypes in the way you can with Channel Entries.

Many times I've emulated simple category functionality through a custom fieldtype and filtered on the front end using the

search:

parameter in the entries tag. It can make it easier to filter entries with all the extra functionality available to you with the channel entries tag.

Of course - there are times where using categories is the only way to get the results you need. Which has been the case on a project we're currently working on. I wanted to share how we built a series of listing pages to display category listings in the way we wanted and allow clients to be able to create and edit category landing pages in the user friendly way they rightfully expect.

Note: this is based on a client website still in development. So for the time being we're unable to provide any links to live, working, examples. Sorry.

Firstly we created a Category Group 'Products'. In here we have multiple categories, some of which hold child categories.

In setting up your categories - make sure you have Auto-Assign Category Parents set to 'no' (more on which later).

The initial Product page is pretty straightforward. We use {exp:channel:categories parent_only="yes"} to list out the parent categories.

The following results page is where things started getting a bit trickier using available Expression Engine code. In fact - we found we couldn't do it and made use of the incredibly helpful GWCode Categories plugin.

Your initial thoughts might be to wrap the results in a channel:categories tag and get the relevant category_id passed from the url - but in practice this didn't work for a couple of reasons:

First - we couldn't know whether the results would need to show a level of child categories or a list of products (Channel Entries). And if it were Channel Entries, we wanted to be able to display within a Low Reorder group. Which meant looking for another option, which is where gw-code categories came in.

It allowed us to do this:

{exp:gwcode_categories cat_url_title="{segment_3}" style="linear" incl_self="no"}
  {if no_results}
{exp:low_reorder:entries set="1" limit="99" disable="member_data" category="{segment_4}" }
<!-- if the category has NO child categories, we want to list out all the products assigned to this category.
We do this here in the normal way, just using Low Reorder rather than EE channel:entries tag -->
{/exp:low_reorder:entries}
  {/if}
<!--if there ARE child categories, we list them here-->
<li>
<h2>{cat_name}</h2>
<img src="{cat_image}" height="{height}" width="{width}" />
<p>{cat_description}</p>
</li>
{/exp:gwcode_categories}

So far so good. We've used the standard Expression Engine category fields for basic text and image info and to the extent it is still simple for non-technical site owners to manage.

Where we're let down though is if we wanted (and we did) to have additional custom fields per category to create customised, enhanced, landing pages with additional descriptions (via a WYSIWIG editor) and some fields for page title and meta descriptions. These last two we could write dynamically based on the category name and description - but for the best SEO performance I think the site owners should be able to manage this themselves.

As we said above - there's no way to add these fields within the Category details without requiring the editors to be able to know some HTML to format the content.

Our solution has been to create a Channel called 'Category Landing Pages'. For every category we want to have an enhanced landing page - we can create a new Channel Entry, using as many Expression Engine Custom Fields as we want. We assign the same category group to the channel as used for the Products.

On our Category listing page we can add this at the top of the template:

{exp:channel:entries channel="ch_cat_land" limit="1" category="{segment_4}"}

and under this pull in custom fields for page title, meta description.

It works pretty well. If you have child categories, just remember to Auto-Assign Category Parents set to 'no' - otherwise you'll run into issues with a child category entry displaying when you want the parent.

The drawbacks ... performance wise there's a bit of a hit as you have to make an extra query against the channel entries as it's not all held within categories. But I can live with that for the advantages it offers in compensation.

For the site managers they have to create/edit category information AND remember to then go to Channel Entries to publish or edit the corresponding landing page. This is the biggest drawback as it does take away a bit from a truly slick workflow - but considering category pages are unlikely to be added or edited that often I think it's acceptable. Plus the added benefits of using custom fieldtypes adds enough richness and functionality to make this compromise well worth it.

The main goal here has been to make it easy for site editors to create and manage attractive and content rich landing pages for their categories. There are a couple of other enhancements available too.

You could use Content Relationships to recommend specific other categories. You could even have a custom field for a description to tell the visitor exactly why this other category is particularly relevant. This shows a level of care and attention that can really help a user's journey through your site and reinforce a positive impression on them.

You can also create multiple category landing pages for any category. An example of where this might be useful: you have your regular content landing page with carefully crafted content. But you have a short term special offer, or feature you want to promote related to this category. Rather than have to write over your current landing page, and then replace all the original content a week later, you can create a second landing page for that category - show this to visitors for the specific time period and then revert back to the old page at the end of the offer period.

Using Expression Engine's publish and expiration date options, you can have your offer page written in advance and set it to automatically publish on a set future date - and then have it automatically expire (and roll back to the default landing page content) whenever you like.

That's a fairly quick summary of some moderately complex Expression Engine functionality - we've not gone into too much depth in the explanation of some of this code, but if you have further questions about anything covered here or you'd like to hire us for your own Expression Engine project, please contact us. We are a small web design agency based in Exeter UK, specialising in Expression Engine development.