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:

  • Brad P

    Could you explain why WordPress custom fields are considered a “hack” in this situation or are they always considered as so.

  • http://www.hypeelite.com Erika

    ^^ @ Brad – I think I understand what Darren’s saying… they’re not a hack in the sense that they’re doing something outside of what they should be doing, but in the sense that they’re an external source of doing what one would hope to accomplish within the regular function of WordPress. You have to find the proper field in the drop down, so on and so forth.. you can’t just enter the basic content in the page.

    I just wrapped a project that took me to my limits in WP and left me looking at EE… with the only blog that I know of that proudly rocks EE being Veerle Pieters’ website, I dug and found a link to a EE tutorial from boyink. In short, I’m glad you wrote this since it’s about where I am with my developmental skill. :)

  • Brad P

    @ Erika – Thanks for the input. I have a similar issue of reaching the limit with WordPress right now. I am attempting to build a statewide business directory using custom fields to keep track of address, city ,state, zip, website and more. In doing so I am coming up against several limitations especially the built-in search functionality.

    Initially I was going to build the business directory using EE and have already purchased a license and boyink’s “Building an EE Site” book. Since I will be duplicating this directory model at least 20 times, the licensing can get a bit spendy with EE, that’s why I tried the WP route first. If nothing else, it will be good WP experience but it seems I might end up using EE. :)

  • Giuseppe

    *NOW* I understand why EE costs so much! :D However, If you have some development skills you can use the Django Python framework and get almost the same result. You will also get an admin panel for free.

  • Darren

    @erika: thanks for helping clarify. Yea I didn’t mean the very idea of using custom fields in WP is a hack, but using the Post/Category/Tag functions to their absolute limits really takes WP outside its intended functionality and adds an additional layer of complication for the client to understand in the control panel. Suddenly instead of just managing their blog/news section of their site, they must understand what parts of their site are blog posts, which are content posts, what are “pages” and so forth. In short, these content areas can be finely distinguished with EE in a way that’s a little muddled in WP.

    I also want to say, I hope people understand I’m consciously comparing apples to oranges. WP and EE are very different and I’m only comparing them because of personal experience with both, not because either is comprehensively “better” – it all depends on the project.

    @brad: creating directories and listings is a perfect use of EE. Regarding the search functionality, with EE you can also control what’s indexed and what’s not.

    @giuseppe: well, as much more of a front-end and design guy, EE’s learning curve seems more manageable for me right now than Django’s.

    Regarding cost, the $250 for an EE license is usually rolled into the total cost for medium/large projects which already range between $7,000-$40,000. So the cost of EE is pretty negligible overall, especially when the final product is very scalable and easy for the client to use.

  • http://www.richstaats.com Rich

    Oh man was I happy to see a little (1) next to your name in netvibes. It has been a while, but with a full series on EE I’m stoked.

  • Brad P

    Darren,

    I agree, the cost of EE is negligible when using for a client project. In my particular case, I am my own client (in-house project) so I was trying to do it on the cheap as I might need 20 licenses.

    Looking forward to the rest of your EE series. Also looking forward to the EE 2.0 launch which if on track should be very soon.

  • Darren

    @rich: I appreciate that :) Now that I’m settled back in the country on a regular schedule, I hope to be posting more, mostly reviews of stuff I’ve been using lately (EE, Interspire, Sunshop).

    @brad: I see what you mean about price. Do any of your projects qualify as “Personal license” ($99)?

    • http://www.alaskawebcrafters.com Gregory

      Darren

      Have you posted any reviews yet of Interspire and Sunshop yet. Am shopping for a cart and am very interested to hear you compare these two products.

      thanks

  • Brad P

    All of them will involve advertising revenue so I believe that disqualifies me for the personal license. I could actually run all 20 sites from one EE installation to begin with as all sites will reside on the same dedicated server. If I end up selling off one of the directory sites, I could then purchase another license to migrate it to the other person’s server.

    Hmmm . . . maybe I will develop both WP and EE versions at same time.

    What’s the best way to export posts with custom fields from WP?

  • http://www.krubner.com/ Lawrence Krubner

    Seems like the idea of the framework that could generate custom CMSs occurred to a lot of people circa 2004 and 2005 and since then we’ve seen a number of projects emerge that have refined the idea and keep making it better and better. Ruby On Rails, CodeIgniter, CakePHP and Symfony can all boast of projects where the developer creates their own, custom weblog software in less than 30 minutes. From your description of it, Expression Engine sounds like a GUI for using CodeIgniter to create that custom CMS. I know there are similar efforts underway in the world of Ruby On Rails. The goal is to allow non-programmers to do a lot of the stuff that used to be the sole province of programmers.

  • Darren

    Expression Engine sounds like a GUI for using CodeIgniter to create that custom CMS…The goal is to allow non-programmers to do a lot of the stuff that used to be the sole province of programmers.

    Yea, as a front-end person it’s a relief to build stuff with a good interface and few real technical requirements. I’ve sampled CodeIgniter alone and it’s far more intimidating without the EE interface.

    Just to clarify, EE v2.0 will use CodeIgniter, though up til now it’s been built on a similar-but-different codebase. More here.

  • http://www.krubner.com/ Lawrence Krubner

    Darren, if I read things correctly, CodeIgniter grew out of ExpressionEngine. As it says here

    EllisLab is blessed with two of the greatest communities that can be found anywhere on the internet in ExpressionEngine and more recently CodeIgniter.

    That means that the relationship of CodeIgniter to ExpressionEngine is the same as the relationship of Ruby On Rails to Basecamp. First 37Signals developed the Basecamp application, and then later, as David Heinemeier Hansson refactored the code, the code base become its own framework. In my opinion, this is a crucial biography for a useable framework – the frameworks need to start off as real-world applications, and then as developers abstract it and try to make it more flexible, it becomes a general purpose framework. Symfony has the same biography.

    Even at Category4, as I recall, Tim was working on a form builder that had a lot of potential (I’m thinking of back in 2006). The idea has been widespread for the last few years.

    The alternative way to build a framework is to have a bunch of companies send representatives to an industry-wide committee to vote on the ideal features of an ideal framework, but this type of process tends to lead to disasters like the Struts framework – so heavy and overdone that now nobody wants to use it. Most of the movement of Java developers to Ruby can, I think, be blamed on Struts.

    In the world of programming, script languages (PHP, Ruby, Python, etc) were the big breakthrough of the last 10 years. It’s only been since the late 90s that they’ve been taken seriously. I think the next big breakthrough is what ExpressionEngine represents – a GUI on top of a framework, so that non-developers (really, talented non-programmers – the person must have some technical talent, though they don’t have to be programmers) can have all the power of a framework at their disposal, without needing any help from a programmer. The idea goes all the way back to Bill Atkinson’s Hypercard, released in 1987, (incidentally, Hypercard is where I first learned how to program), but I think such GUI environments for talented non-programmers (GETNPs?) tended to run too slowly. That was always the big complaint against Hypercard – that it was too slow. Modern machines, I think, have the power to let these GETNPs finally have their day in the sun, so to speak.

  • http://fortysevenmedia.com Jonathan Longnecker

    Quick question, you’re showing a “file” type of custom field. That’s not an option when I creat a new custom field; are you using some sort of plugin or extension for that?

  • Darren

    Gah! Good point Jonathan, it’s indeed an extension that can be found here. Someday soon maybe it will make it to the EE core.

    Some other extensions we add during setup:

    Again, I wish all these were built into the core.

  • Pingback: Recent Links Tagged With "listings" - JabberTags

  • Pingback: WordPress as a CMS: Making Your Content Unbreakable | Darren Hoyt Dot Com

  • Pingback: Creating Custom Listings with Expression Engine, Part II | Darren Hoyt Dot Com

  • http://www.siebird.com Austin

    Darren – first off, great site! Stumbled my way here a few weeks back when Smashing Magazine posted WordPress Developers Toolbox. Been following you since!

    Anyway…since then I have a couple projects in the works

  • http://www.siebird.com Austin Siewert

    Darren – first off, great site! Stumbled my way here a few weeks back when Smashing Magazine posted WordPress Developers Toolbox. Been following you since! and its got me excited about the projects im working on

    Anyway…I thought I was going to use wordpress for one project, but now I think EE is the way to go. With the custom fields, etc. I have installed EE locally here at work and been messing with it. Installed the extensions and understand the “file” extensions, but am a little confused the “One-to-Many”? Can you explain that in a bit more detail? or will that be in part III.

  • http://www.vivianfoate.com Mike Foate

    Hi Darren,
    Great work! The information here is VERY helpful to me. I am in the planning process for a re-design of our real estate for sale site for my wife and I. We hope to use EE and hope to be able to have a programmer hook it up to our MLS and their RETS server so we can display properties from the MLS.

    Your info on how to customize the backend for adding listings is VERY helpful. We need that feature for our site as well as the MLS listings. Our listings will be in the MLS properties but we want to publish our personal listings from the MLS seperately to the site and keep them there indefinately for some search engine love.

    The main draw back right now with EE for us is from the customers/membership management backend. We would like to have more crm capabilities so that customers can save listings, add listings their portfolio etc. Then we need to be able to manage the customers as leads and group them for email campaigns and contact.

    I am trying to find out if EE 2.0 might be more suited for backend customization since it will be on the ci code base. Please comment if you have an opinion in that regard.

    Thank you so much for the GREAT info!
    Kind regards, Mike

  • Darren

    @Mike: glad you’re enjoying the series. My company actually has a custom properties/MLS package that we’ve installed for many local real estate firms. It’s got a lot of options and plugs into various local listings databases also. If you want to email me directly, I can point you to examples and a few more details – might be what you’re looking for.

  • Darren

    @Austin: sorry, looks like your comment got flagged before.

    A “one to many” relationship just means one piece of data that can be related to many groups. Imagine real estate listings and the various features associated to them: number of bathrooms, square feet, etc. Now imagine being able to sort those listings and create relationships between them according to various combinations of those features – this makes for a much more powerful CMS.

  • Pingback: ExpressionEngine Developer's Toolbox | Developer's Toolbox | Smashing Magazine

  • Pingback: ExpressionEngine Developer’s Toolbox | fatcityart

  • Pingback: ExpressionEngine Developer’s Toolbox | Web Burning Blog

  • Pingback: Design Intellection

  • Pingback: Closer To The Ideal » Blog Archive » Pushing WordPress to the limits of customization

  • Bob

    Meh, if someone really needed this functionality on WP, they would develop, or contract someone to develop, a plugin for it. Not to say that this functionality is unnecessary, and having this functionality natively is convenient, but the developers of EE and WP made their platforms extensible for a reason.