Tag Archives: cms

DesDevHack, newdtlt

DTLT Revamp: Custom Fields Are Your Friends

1 Comment

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:

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

2008-11-26_1111I 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.

2008-11-26_1116The 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. 🙂

DesDevHack, newdtlt

Revamp

14 Comments

One of my goals in my new role is to blog more regularly about the projects I’ll be working on. To that end, I’m going to use this post to kick off what will (hopefully) become a series about a project to revamp the DTLT Web site. I’ve wanted to tackle this initiative for several years, but I never seemed to be able to carve out the time.

Because I’ve been thinking about this site for so long, I have a pretty good idea of how I’d like it to shape up. That said, another reason why it’s taken so long to get around to doing it is that everytime the project came up around the table it seemed like we’d talk it to death — and I’ll be the first to admit to leading the charge on over-talking the issue.

This time around, I’m planning on just putting something out there that seems to make sense to me and that reflects (as much as possible) the conversations that we have had in DTLT over the years about a new Web presence for the division. I figure we’ll take our usual iterative approach and something good will emerge. Er, at least I hope so.

I have another reason for wanting to tackle this project — and wanting to blog it. For quite sometime, we’ve been speculating about the feasibility of using WordPress as an actual content  management system. We’re surely not the only folks doing this — there are quite a few more experienced WordPress users out there who have tackled this issue. And, undoubtedly, the work that my colleague Jim Groom does in WordPress pushes these boundaries (and inspires me) regularly.

It often seemed, however, that when push came to shove, there was always something that prevented WP from being the right CMS solution. Although I think I’ve always suspected that with the right mix of plugins and the right theme, the problems could be surmounted.

So the other thing I’m going to be trying to do in some detail is narrate the process of piecing together various WP plugins in order to strike the right CMS note, so to speak. I’ve already found a few gems that I think are answers to several of our Web site prayers.

In my research into how to piece this system together, I was surprised at how hard it was to find a comprehensive approach to WP as a CMS. There are lots of people talking CMSing WP on various forums or at various plugin sites. But I couldn’t find anyone who was tackling the problem “cradle to grave,” so to speak. (I fully realize I may have just missed some amazing resources out there — please let me know if I have!). I’m not sure why this is. In a conversation the other day, Jim speculated that a lot of the work in this area is being done for commercial purposes, and the developers may not want to share all the details of how they trick out WP. Well, I don’t care about that for my purposes — UMW’s paying me regardless. 🙂 So, I’m going to narrate away (including the missteps I take), and maybe I’ll create something useful for someone else down the road.

I tend to think about Web sites in terms of content types. I’m not sure that’s the best thing, but it’s how my brain works. Right now, I’ve got five main types of content I’d like to see us include:

  • (News) Posts: I’m calling them NEWS Posts just to dilineate them from the WP “posts.” Ultimately, I think I’ll be using WP Posts as the main content unit for all of these, and I want to not get muddled by the nomenclature. These are pretty self-explanatory: posts about news or announcement for our division.
  • Projects: These would be brief descriptions of past or ongoing projects with screenshots, links, and a list of contributors.
  • Opportunities: Any event, workshop, grant, contest, etc. that a faculty member of student might be interested in.
  • Resources: These would be short write-ups of tools, technologies, software, hardware that could be used by faculty to augment the learning environment.
  • People: To start, these would be write-ups of each of us in DTLT. Eventually, maybe we’d have write-ups for faculty collaborators

There are a few other features I’m intersted in:

  • Subscriptions: A main goal of this site is to provide faculty with more and better news from DTLT. We can send out all-faculty emails, but I kind of hate that approach. My gut feeling is a lot of faculty just delete these unread. I’d like to create a system that allows a faculty member to opt-in to receiving our news, and, hopefully, with some granularity about what kind of news he/she gets.
  • Events: I’d like a calendar of events. This is a bit tricky as there are other calendar sources that we contribute to at UMW. I’ll need to figure out if this can interoperate with them. I also need to figure out how Events and Opportunities are related.
  • A Non-Bloggy Theme: I’m really aiming to push WP out of it’s blog boundaries for this project. I know it’s possible to build a perfectly good site that isn’t really a blog by using a blog theme, but I want to do something different. I’m investigating tricking out one of the more magazine-style themes.
  • Cross-tagging and categories: To whatever extent possible, I’m hoping to use WP tags and categories to cross-link among all of the content typtes (that’s why it’s important to use posts and not pages as the content unit since pages don’t use categories)

I’ve probably put the cart before the horse here. Any decent Web developer would probably say I should start by outlining my goals for the site. Don’t worry, I’ve thought about those issues. But, truth be told, I’m a concrete thinker. I need to start futzing in order to solidify my own understanding of my goals. So I will expand on that, but a little later.

In the meantime, I have done some initial development and research. So if you want to play along from home:

  • I’m building the experimental site at http://www.marthaburtis.net/newdtlt. Be forewarned: this site is NOT ready for primetime. I fully expect to break it and blow it up regularly.
  • I’m going to post screenshots along the way in a Flickr collection. Link forthcoming.
  • I’m tagging stuff I find that might be useful at http://delicious.com/mburtis/dtltsite
  • Right now, the following plugins are looking very promising (particularly in concert with each other). If you know anything about them, feel free to share:
    • Flutter (formerly Fresh Post) allows you to create custom Write Panels that make use of WP custom fields (I’ve always thought custom fields must be part of the key to turning WP into a CMS
    • dTabs is a pretty slick plugin for creating custom tabbed navigation. It allows you to link a tab to a page, a post, a category, a URL, etc. The styling can be a bit tricky.
    • Idealian Category Enhancements allows you to designate a particular template to be used for a particular category, automatically.
    • AStickyPostOrderER lets you manually order posts within a category, bypassing the automatic reverse chronological ordering.

The theme I’m playing with right now is called WordPress Magazine. It’s a pretty clean, block-style, magazine theme. I’m not sure it’s the right one long-term, but it’ll do as I experiment.

So, I have no idea if this will be useful or even interesting to anyone else. But, that’s okay. In the end, I think this will be useful narration for me as I develop a better understanding of my project and my tools.