This post is the second in a series that I’m writing about my experiments with redesigning the DTLT Web site. You can read the introduction here. You can see all of the posts in this series here. 

There are a lot of places I could start my next post about the DTLT site, but given the critical role that I’m imagining for custom fields (and, hopefully, the Flutter plugin), I thought that might make the most sense.

 A Very Basic Introduction to Custom Fields

For those of you who don’t know, custom fields are a built-in feature of WordPress. They’re a part of the write panel for posts and pages, but you may have never noticed them. Here’s the default custom field panel:

Basically, they allow you to associate additional information with your posts or pages. If you read the official description of custom fields on WordPress’ site, you’ll see that the developers refer to this feature as a way to add meta-data to a post or page.  Basically, you choose a “key” for your field — that’s the name of the element — and a value. Once you create a new field/key, you can associate it with other posts/pages, by choosing it from the “Select” drop-down menu. You can also  also add a key to a post more than once.

But creating the custom field is only the first step. Once you’ve done that, the information is stored in the WP database, but it’s not going to show up on your post and page magically. You’ve got to edit the template to display the values. To do this, you use a built-in template tag (more on these in a later post) that you add to The Loop (which is the core part of WP template code for displaying posts and pages). The tag is just a simple snippet of php:

<?php the_meta(); ?>

With that bit of code added, your field values appear in your post/page (the location depends on where you place the code in The Loop). The technique is pretty simple, but it’s not terribly nuanced. All you’re going to get is a unordered list of  whatever custom fields are associated with the post, and a pre-existing style in the WP CSS will be used to style it (of course you can modify that style, but you’re still dealing with a list of content).

For more advanced approaches, there are some built-in functions in WP that allow you to do more than just display the custom fields in a list. You can find more information about them on the WP page about custom fields.

On that same page, I’m particularly intrigued by this text: “We expect that independent developers will come up with many interesting uses for post meta-data in the form of plugins. The the_meta() template function is just an extremely basic example.” What’s interesting to me is how few plugins I’ve found that do make use of custom fields. When I first started using WordPress a few years ago, I started looking around for more powerful/elegant ways of utilizing this feature, but I’ve never found very much. I think that’s kind of odd — to my mind, custom fields provide some really intriguing ways of extending WordPress.

If you’re interested in learning more about custom fields, I encourage you to take a look at some of these resources:

• WP’s Custom Fields page 
• A Custom Fields Tutorial Series at justintadlock.com
• Alan CogDog Levine‘s awesome dissection of the NMC Pachyderm site (actually there’s way more in here than just custom fields, but it’s a critical piece of his design puzzl)

So, Why Do I Care About Custom Fields, Anyway?

My interest, quite frankly, is less in the possibility of adding meta-data to WP content. What I’m interested in really is being able to structure posts and pages, based on the kind of content that’s being created. So, for example, if I was creating a post about a project that we’re working on in DTLT, I could set up several custom fields for the various pieces that would make up a project content piece: Description, URL, Collaborator(s), Screenshot. There are three main reasons why I’m interested in this approach to content creation:

1. I imagine it would let me do more interesting things in terms of presenting the content. If each piece of information is held in a different custom field “container,” I can arrange them on the page (in custom templates) and style them more granularly.
2. If I pre-define fields for a type of content, then there’s a better chance of creating more consistent pieces of content, in general (particularly when multiple authors are working in a blog). If it’s important to me that a project post have particular types of information, then the custom fields serve as a kind of prompt to make sure each new post is complete.
3. For certain fields, I can imagine wanting to “pivot” information presentation on them. For example, if I’ve got a “collaborator(s)” field for projects, I might want to be able to slice my project content up so that I can see all of those projects that a particular faculty member collaborated on DTLT with.

All of these reasons really require that I structure my content into different containers, and custom fields definitely seems like a way to do this.

Where Flutter Comes In

I mentioned above that my search for WP plugins that build on the custom field feature has been pretty fruitless. Well, a few weeks ago, I finally turned up one that that looks like it has a lot of promise. Flutter (previously called Fresh Post), puts a more elegant front-end on custom fields, allowing you to define new “Write Panels” (essentially new versions of “Write Page” or “Write Post” in the administrative back-end of WP) with custom data fields.  You can define as many different write panels as you want, theoretically with each one designed to deal with a different flavor of content for your site.

The first step in setting up a custom Write Panel is defining some options for it. You can see those in the image on the right. Being able to automatically define a category and set which default edit blocks appear is very cool.


Once I’ve created the custom panel, you can add custom fields to it. And, you have more options than just designating a key and a value for custom fields. Flutter actually has several field types that you can choose from:

• Textbox
• Multiline Textbox
• Checkbox
• Checkbox List
• Radiobutton List
• Dropdown List
• Listbox
• File
• Image
• Date
• Audio

Basically, you define the fields you want to make up custom type of content and you build a custom panel for that type. When you’re done, you’re “Write” tab will reflect the new panel names (and you can hide the default Page/Post sub-tabs to minimize confusion).

Another very cool feature is that you can create groups of fields that can then be duplicated. So, for example, if I want to be able to add RSS feeds to a new piece of content,  I can define a group called “RSS Feed” with two custom fields, “FeedTitle” and “FeedURL.” That group can then be duplicated, allowing me to have more than one RSS feed associated with a post. I can then use something like SimplePie to display the feed(s) on the page. (I’m using SimplePie this way now with the “Person” content type on the new DTLT site. There’s no styling yet, so it looks crappy but you get the point.)

There’s a whole other level to Flutter that I haven’t gotten into yet — once you’ve created your custom write panels, you can then use a GUI editor to edit your theme with custom widgets (or so it seems). However, my initial research into this feature suggests it’s built on the Canvas WP template engine, and I believe that project is now defunct.

There are a few pitfalls that I’ve run in to with Flutter.

1.  By default, the “File” field type uses a Flash-based file uploader that I can’t get to work in my version of Firefox (3.0.4) with my version of Flash (10). It took me a while to find out that I could opt for the standard file upload feature in the Flutter settings. (The Flash version did work for me on Safari. Sorry, can’t tell you what the IE situation is.)
2. While you can disable the “Write > Post” and “Write > Page” subtabs, you can’t disable the “Manage > Post” and “Manage > Page” subtabs. It’s a small thing, but it could lead to confusion, particularly if there are multiple authors on a blog.
3. When you create a custom write panel of the “Page” variety, you’re given the option to show or not show the category block. Well, pages in WP don’t use categories (unfortunately!). I thought that it was possible Flutter had found a way to assign categories to pages, but, alas, this is not the case. Looks like they just offer the same customization options whether the custom panel is a post or a page. For this reason, I’m using posts exclusively as the building blocks for my content. I need me some categories.
4. The default WYSIWYG editor for custom fields of the type “text area” doesn’t seem to be as fully featured as the default WP editor. I’ve got the very cool cets_EmbedRSS plugin installed (kudos to Jim for pointing this one out), and while it adds the RSS button to the editor in the text area, it doesn’t seem to work. I’m not sure what’s going on here, but be forewarned.
5. In a post that D’Arcy recently wrote about Flutter, he mentioned that it did some odd things to the main write panel, causing his posts to wrap strangely. I haven’t seen this behavior, but that doesn’t mean there isn’t something wrong.
6. D’Arcy also mentions that what’s going on behind the scenes with Flutter is a bit klugey. This probably has as much to do with how custom fields are handled in the WP database as it does to anything that Flutter is doing, in particular. Basically, custom fields are stored in a table called wp_postmeta. Each new value is a new record, with post_id (presumably to associate the custom field with the proper post or page), meta_key, and meta_value fields. That seems a bit topsy-turvy — the fact that there is no relational structure where a new custom field becomes a new record, and then the values are associated with those records, but what the heck do I know? Flutter builds a bunch of new tables to store information about the different Flutter options that are then associated with the custom field records (don’t know how, yet; I haven’t really looked into it). Bottom line: I have no idea if the back-end database structure is going to affect any of the cool things that I’m wondering if I could do with Flutter. Guess I’ll find out.

For now, I’ve created five different custom write panels for the new DTLT site: Person, (News) Post, Opportunity, Project, and Resource. They each have a different set of fields, depending on what I imagine they should consist of. (I’ll blog later about what fields I’m using for what content, since that gets at a whole other, non-technology, set of decisions.) One of the cool things about this approach is that since at their core they are all just posts, you can use categories and tags as a way to slice across the different content types. So, for example, if I tag a (News) Post and a Project with “SteveGreenlaw,” then my tag page for “SteveGreenlaw” will show me all of the content (of any type) that is tagged that way. With a little template massaging, I think the display could be finessed to make that a pretty cool view of content.

What’s Next

1. I’m really excited about diving into creating the custom templates to display these different types of content. I’ve finally wrapped my heard around The Loop (I think) and features of WP like template tags. I’m basically an ignoramous when it comes to php, so I’ve got a lot of learning to do (there’s another post here about a breakthrough I had about learning php — I’ve got to blog about that, too!).
2. I’m also interested in figuring out if there is a way to filter WP content based on custom fields. So, for example, as I mentioned in my example above, if I’ve got a field called “Contributor(s),” can I create a display of content that just shows those posts that share the same value in that field? I’m sure there’s a way to do it. Question is if I can figure out how.
3. Perhaps the biggest challenge I’d like to try and solve that I haven’t even touched on here is how custom fields can interact with RSS feeds. I’ve found at least one plugin that seems to allow for including custom fields in RSS feeds. The reason I’m interested in this is that I think it might allow for distributed authorship on a blog like ours. Truth is, we all blog in different places, primarily, and very often the contributions we make to our own blogs could be meaningful on the DTLT site. I don’t want to ask people to duplicate effort. So, I’m wondering if it would be possible to get a feed from our disparate blog sources that spits out the same custom fields as I’ve defined for the DTLT site. One of the cool features of Flutter which I didnt’ get into above (because I really haven’t tried it) is that Write Panels can be exported and imported. So, theoretically, I could share those custom panels with others running WP, and if they have Flutter installed and if I can figure out how to add custom fields to the RSS feeds and if I can figure out how to get the DTLT site to reconsume those fields, we could do something kind of slick. That’s a lot of if’s, and, truth be told, this part of my project is as much proof-of-concept as anything else. Mostly, I’m interested in experimeting with distrubuted authorship, and this seems like one interesting approach.

So, that’s it for now. Thanks to Jim for the shout-out about this project. Now that he’s “outed” me, I’ve got more incentive to keep on blogging about it. 🙂