Vancouver

Dr. Tony Bates posed an interested challenge. The former University of British Columbia professor is a world authority on distance education and e-learning, and over many years in the field he’s accumulated a huge bibliography.

His desire to share the information he has, and how he’s categorized that information, was the key driver for his new website.

As you might expect from someone involved in e-learning, Dr. Bates has had a web site for a long time. As he watched technology evolve, he realized his site of flat files and PDF downloads was woefully out of date.

He knew he wanted it updated for look and feel, but primarily he wanted to be able to take advantage of modern web technology to be able to manage his constantly growing list of bibliographical entries – nearing 2,000 at last count. And because his focus is on sharing the information he has, he had a strong desire to include other people’s thoughts on the bibliographical collection, make suggestions of their own, and if so inclined, help keep it up to date.

And then there was the budget.

No large institution or big commercial brand behind this project. Dr. Bates was paying out of his pocket.

Although he never got into details, I know that a number of web development companies he approached in Vancouver never even responded to his request for quotes. Those that did were scared off by the sheer volume of content, and the limited budget.

Dr. Bates was referred to me by Loc Dao of RandomLink Interactive. Loc’s company is primarily a Drupal developer and they were knee deep in a number of large projects, and he wondered if I wanted to take it on.

After meeting with Dr. Bates I was hooked on the challenge. Here was a guy who’d prepared all his material in advance (his 110 page Word doc of content was sitting in my in-box) . He was clear about what he wanted to accomplish, yet was willing to listen to ideas and consider options.

The Challenge

At its heart, the challenge was one of finding a way to help Dr. Bates manage his lists of bibliographical information by topic.

While all the bibliographical entries fell within the broad e-learning or distant education categories, Dr. Bates has developed a system of categorizing the bibliographies and cross indexed them to help others looking for specific topics or types of information. His Word doc outlined over 40 different topic categories, each with it’s own bibliography. Many of the bibliographical references were found in multiple categories. In the past, he’d simply managed the lists by hand, and generated a PDF for download. As you can imagine, managing those lists was becoming a nightmare.

The rest of the site was primarily informational pages that he wanted to be able to edit, and Dr. Bates also wanted to have a blog. The site map was very straightforward – I use OmniGraffle for both site maps and wire frames, and it didn’t take us long to settle on a plan.

One minor problem

I still wasn’t sure just how I was going to sort the bibliographical entries, and at our meetings, Dr. Bates was rightly concerned about this. I asked him to trust me, that I was working on it, and that I wanted to move ahead with the visual design while I continued to sort out just how it was going to work. To his credit, he did trust me, and designer Sara Bailey with At Large Media moved ahead with the design phase.

Themes, CSS and CMS’s for non-programmers

I’ve licensed Brian Gardner’s “Revolution Pro Business” theme and have been working with it for a while, both for my own blog and for other sites like VanGoGreen.com, Glave.com, FinancialPeaceofMind.ca and Eco-Shed.ca. Ironically, but perhaps proving the point, FinancialPeaceofMind.ca doesn’t even have a blog, it’s a web site running nicely with WordPress as its CMS.

I’m not a programmer, so the huge amount of functionality Brian has built into the template is very attractive. I can pick and choose what to keep and what to remove, and customizing pages to fit the project. It’s a credit to Brian that the ‘bones’ of his theme are so strong. Sara did a wonderful design, and I set about adjusting the CSS and the page templates to fit.

Like the other recent WordPress customizations I’ve done, this site uses WordPress primarily as a CMS, with blogging being almost secondary. It’s an interesting shift in focus, and getting easier with each subsequent release of WordPress. I’ve also been using OpenAds in conjunction with WordPress quite a bit, and really happy with the results. Ditto with Slide Show Pro – a CMS for flash. By mixing and matching these tools, I can give clients the ability to update a lot of different aspects of their site, and harness database driven dynamic content.

I like keeping the dynamic menu system, so I customize section page templates for each section, then use child pages for any pages within that section. Be settling on a set number of ‘parent’ pages, I can plan the main nav and instruct my clients to only create child pages within those sections. In Dr. Bates’ case, each and every page on the site is editable in the standard WordPress input screen. Limiting the number of parent pages means the nav won’t get broken since new pages are child pages, and they cascade out of the main menu.

Time to Decide

Dr. Bates wanted to be able to add entries to any of his lists of topics, as well as add new topics in the future. He also wanted to be able to cross index entries to more than one list. Because of the limited budget, I originally thought I’d just re-create his lists and he could update them using the WordPress WYSIWYG input screen.

But the more I thought about it, the more I wanted to find a solution that harnessed both WordPress’s ease of content input, the power of the database, and the WordPress engine. It was going to be mean more work (for me) getting things set up, but in the end, the right solution for my client

I knew that I was either going to use WordPress tags or categories to generate a list, and once I started adding real content, it become apparent right away that the most convenient way to do this was via categories.

On the WordPress manage categories page I was able to create all 43 categories, which would now show up as a nested list when creating a new post.

I also decided that each bibliographical entry would be it’s own post, thereby allowing me to assign it to one or more categories. Data input is quick and easy; each bibliography entry is a post, and once it’s created, the only thing left to do is click on the correct category and add some tags. Yes, adding the initial bibliographical entries was a huge amount of data input, but once in, adding anything new would be quick and simple.

To generate a list, we call up a category, and presto – a complete list of all bibliographical entries in that category is generated. WordPress lists these in reverse chronological order in which in they were created – and over time this will actually be a benefit, showing the ‘newest’ entries at the top of the list.

a href=”/category/general/”><strong>General publications</strong></a>
<ul>
<li><a href=”/category/general/e-learning-and-distant-education/”>e-learning and distance education</a></li>
<li><a href=”/category/general/e-learning/”>e-learning</a></li>
<li><a href=”/category/general/distant-education/”>Distance education</a></li>

For the bibliographical entries, we’re assigning author name(s), and year of publication as key tags, then any others we think are relevant. This rolls up in a tag cloud widget in the sidebar. We’re using the tags to generate a list of publications by author last name as well.

Authors:
<ul>
<li><a href=”/tag/a”>A</a></li>
<li><a href=”/tag/b”>B</a></li>
<li><a href=”/tag/c”>C</a></li>
<li><a href=”/tag/d”>D</a></li>
<li><a href=”/tag/e”>E</a></li>
<li><a href=”/tag/f”>F</a></li>

One of the key factors in the success of this collection is that users can find the information they’re looking at in a variety of ways. WordPress search is robust and is delivering excellent returns, or users can find lists based on Dr. Bates’ topic categorizations, or the tag cloud.

To roll up featured stories in the side bar, we created a separate category so that Dr Bates can easily assign an entry to show up. Over time, as the different sections of the site flesh out, we’ll probably roll-up entries relevant to that section in the side bar.

I was able to delivered Dr. Bates his site on time and on budget – with a lot more functionality than originally planned

Tips?

Well, here are a few:

• Set up a development environment and try loads of different plugs ins. Push things around and see what happens. WordPress is easy to reinstall or fix if you mess something up.
• Use a dev subdomain so that you can show your client work in progress. I’d never do this with a flat file site, but showing the client how the backend functions early in the process makes a huge difference. And if they’re inputting any content themselves, they can do that even while you’re continuing to tweak design.
• Moving from dev to your live site (changing domains) involves a few hoops – there are good directions here. Follow them and you’ll be fine. Here’s a tip – if you move the site rather than use the import/export function in WordPress, all your site setting move with. Nice.
• The more you work with a theme, you more you’ll be able to customize it.
• If you are getting confused about which php page is used to generate the page, add the name of the php file right into the template as plain text – then you’ll see it each time the page is called. In the early days of customizing templates, I found this helped clear a lot of confusion as I moved further into customizing pages.
• Play play play. If you think it should be able to do something it probably can.
• WordPress as a CMS provides all the functionality you’ll need for most sites.
• Look for apps that work nicely with WordPress – Open Ads for ad serving is a fantastic tool, Easy PHP Calendar has a plug-in that brings the data input right in the the WordPress CMS.
• The WordPress forums are huge resource. I’ve run into loads of apparent impasses only to find an answer in the forum, many without having to even post a question. If you think it should work, and it doesn’t, check the forum. If you are going to post a question though, make sure you’ve at least TRIED to find a solution first.