Creating Custom Listings with Expression Engine, Part I

Compared to just three years ago, more and more of Category 4’s small-business clients have become comfortable maintaining their own website via CMS. We’ve built many of these sites with WordPress which clients have overwhelmingly loved. But more and more, larger projects require finely-tuned content management and custom data-types that can be diversely displayed. The obvious choice lately has become Expression Engine.

The Scenario

Our client is a development company that builds a growing number of homes and communities around town. His site will need dynamic sections for News, Homes, Communities, plus a couple static pages.

Each unique listing in the Homes section will display a lead photo, carousel with thumbnails, floor plans, description and relation to specific community. This mockup will serve as our guide (click to enlarge):

If We Used WordPress

With WordPress, obviously we could go to Write->Page, dump our static code in the post editor and be done with it.

But this is bad for a number of obvious reasons. With access to structural markup, clients could potentially destroy the layout, yet they’d almost have to edit some markup to add new listings. This is “content management” only by definition.

The other WordPress option would be to treat each new “Homes” listing as a post category, and use a half-dozen custom fields for the rest, which is how I built Category4’s porfolio page. But in retrospect, it’s still a hack, and for clients it would be confusing and messy enough that they would dread maintaining their site. Subverting the core purposes of Posts, Categories and Tags in WordPress is a slippery slope.

The Right Tool for the Job

Wonderful as WordPress is, developers must use the best tool for the job and this particular job requires much tighter control over the display and management of data types.

This is the beauty of Expression Engine. In essence, EE and its Code Igniter framework allow you to “roll your own” CMS specific to your client’s needs. If the developer configures things wisely, publishing for the client becomes nearly fool-proof.

You can even edit the wording/visibility of the control panel tabs themselves, asserting total control over your client’s admin environment, what he sees and how he enters data, all on a project-by-project basis. Plus, EE offers granular control over user roles, allowing certain groups to edit certain pages while others must be approved. This is ideal for larger projects with many participants.

Custom Field Groups

A powerful way of controlling how clients enter data is the deployment of custom field groups. Creating one-to-many relationships between pieces of data is suddenly as easy or complicated as you wish to make it, whereas with comparable WP plugins you are often at the mercy of the plugin author and his PHP code.

To start our task, I’ve gone to Admin->Section Administration->Field Groups and created a new group called “Homes”. Within that, I’ve added 10 fields to include things like file-upload for flooplan PDFs, photos, titles, descriptions and so on:

Note: adding the “File” field for uploads requires this extension.

You’ll also notice each field also has its own unique “Edit” screen which offers robust options:

Creating a New Weblog/Section

Now that we have a field group for our “Homes” page, we will assign it to a particular section. By default, EE has a funny habit of characterizing everything as a “weblog” but this can be changed in the admin panel under Admin->System Preferences->General Configuration.

I’ll now go to Publish->Edit Sections->Create New and assign my field group:

With that set up, our client will now have a custom screen each time he needs to add a home:

Next Time…

In Part II, we’ll create and configure an HTML template that harnesses the exp:weblog:entries function (similar to The Loop) to display our listings.

Plus, we’ll insert some pagination, an image-resize script and jCarousel for the thumbnails. We’ll soon have a powerful, customizable listings application that requires zero fuss or technical knowledge from the client.

Tagged as: