ArtNano (notes on Wordpress as a CMS)

I recently finished helping out on the back-end of the NISE Network's ArtNano site for San Francisco's Exploratorium. Working on a 'straight-up' website is a rare departure for us at Stamen, but we're big fans of the Exploratorium and were delighted at the opportunity to work with them.

The ArtNano site features contributions from several artists tasked with exploring the nanoscale. My favourites are Semiconductor's gorgeously glitchy 200 Nanowebbers video, Scott Snibbe's multi-scale Three Drops installation and Santiago Ortiz's Time Spiral. Also featured are artworks by Eric Heller, Victoria Vesna and Stephanie Maxwell.

If you're interested in that sort of thing, read the full version of this post for some notes on using the Wordpress blog platform as a CMS for a small website project like ArtNano.

Notes on Wordpress as a CMS

The ArtNano site runs on Wordpress, which is famously easy to install if you have a common PHP and MySQL set-up, and produces nice well-formed pages by default. It also produces pretty URLs using mod_rewrite (so the ends of your links look/like/directories instead of ending with .php?p=blah) so long as you have that enabled, but commonly that takes some help from the server admin.

We were working with Geraldine Sarmiento on the site. Geraldine and I put together the Trulia Hindsight front-end using Wordpress last year, so that was why I chose Wordpress again for this job. Geraldine put together the initial template designs and produced a set of images with a pixelation motif thoughout (more on that soon), as well as a solid set of HTML and CSS that was quick to port to Wordpress's template system. The trickiest part for me was matching up Geraldine's custom nested link styles with those generated by Wordpress – if I did it again I'd ask whoever was writing the CSS to work with Wordpress's markup from the start.

I quickly got up and running using a hierarchy of Wordpress's Pages (as opposed to the chronological Posts) with custom templates for each page (a fairly recent feature). That was great, although subsequently a bit of a pain to finish as we realised that some of the details didn't fit with Wordpress's assumptions. Some pages needed custom link text that differed from their titles, for example, and others needed images and flash videos and so on. Thankfully, Wordpress has a robust way to add custom data to a page and a lot of the template functions can hook into those. There are also a ton of plug-ins and extra code snippets that really help ease the pain:

1. Kimli Flash Embed allows you to post swf content in a wordpress post using SWF Object
2. Fold Page List allows a bit more control over the side bar link display, and can filter out pages by custom fields and display custom link text for posts
3. Thumbnails Manager allows you to change the default thumbnail size for images (we decided not to launch with an image gallery, but this is what would have been used if we had)
4. Jeroen Wijering's Flash MediaPlayer is an easily configurable player for Flash Video, which has an excellent interface for generating examples.

I still ended up hand-coding a fair amount of PHP, to handle things like breadcrumb titles and links and having section pages forward to the first sub-page. The following bits of code show you how to do those three things, if you ever need to.

Forwarding section pages to their first sub-page:

ID."&sort_column=menu_order");
    $firstchild = $pagekids[0];
    wp_redirect(get_permalink($firstchild->ID));
  }
}
?>

And the title tag that shows the post's parent's title if there is one:

Breadcrumb headings for pages:

get_header();
if (have_posts()) : while (have_posts()) : the_post(); 
?>

	
ID);
		$parent_title = get_the_title($post->post_parent);
		$parent_link = get_permalink($post->post_parent);
		$grand_parent = get_page($post->post_parent);
		$grand_parent = $grand_parent->post_parent;
		$grand_parent_title = get_the_title($grand_parent);
		$grand_parent_link = get_permalink($grand_parent);
		echo "$grand_parent_title » $parent_title » $this_title";
        ?>
	

		
	

Getting the Videos Right

Jeroen's MediaPlayer is great, but it didn't work with Safari when displaying multiple videos until I found that it needed the width and height specifying as flashvars as well as in the regular embed parameters. It's not the easiest thing in the world to debug when you're using a php plugin that writes javascript that writes html, that's for sure! I had to modify Kimli's Flash Embed to add that automatically for the MediaPlayer and also to use Simon Willison's addLoadEvent javascript to avoid some page stability issues with writing multiple embed tags in javascript. I don't think either modification is necessary, but in the spirit of the GPL feel free to leave a comment here if you'd like to see them.

Editing on the Web, for non-Techies

One final lesson learned is that however obvious and robustly tested you might think the Wordpress editing interface must be by now, it still holds exciting gotchas for every new purpose. I discovered frustrating things about Wordpress's habit of automatically inserting paragraphs, and it took a while to figure out that it would in fact respect a line-break created with shift-Enter in the Visual Editor, but it would reliably destroy a hand-written
tag in the Code editor.

I was also (again!) bitten by an interface that implied it could deal correctly with content from Microsoft Word, but couldn't deliver. There's a button in Wordpress marked "paste from Word", but it simply wouldn't deal reliably with cutting and pasting from the Word file we had. I think the lesson here is that if editing directly on the CMS isn't an option (and you should consider it), then if you can arrange it you should at least try and get your copy provided as RTF (or similar). Plain text might be a bit much to ask, tying your copy editor's hands behind their back, but RTF is a more appropriate formatting subset that Word's crazy mark-up any day.

In Conclusion

All in all I would give the experience of using Wordpress as a CMS a solid 7/10, and I wouldn't reach for a custom solution any time soon, but I wouldn't necessarily recommend it without a bit of experience hacking templates and PHP beforehand.