Late last year, Puffbox helped Defra move its main corporate website over to WordPress. One of the grand concepts underpinning the project was the use of WordPress’s multisite (formerly MU) functionality, allowing us to run multiple websites using the same installation. We launched with only one child site, for News – probably the easiest one, at that. But straight away, we began making much more ambitious plans.
Like everywhere around Whitehall, the start of a new tax year was to bring various contractual and organisational changes at Defra: and it was set as our deadline for the next phase of work, spinning off many more child sites. The good news is, all went well, and they’re now managing 20 distinct sites through the same WordPress installation – some carrying their own identities, some nested deep (and hopefully seamlessly) within the Defra design.
The first task was to rebuild the output themes from scratch – yes, already. For the initial launch, we had simply dropped WordPress code into Defra’s existing Dreamweaver-based output templates, and grafted some additional CSS on to their existing stylesheets, which were already in need of a good clear-out. They were never going to be able to support a platform consisting of literally dozens of child sites.
We now render the pages using something akin to a multi-level theme framework:
- Every site is built on the ‘base’ theme, which defines the layout, and the bulk of the functionality, but has no imagery or colours attached to it. This theme is effectively hidden on the platform, and will never be used directly.
- There’s then a corporate (‘root’) theme, a child theme of ‘base’ in WP terms, which adds the departmental colour scheme and logo. This theme is used by the top-level site, which contains most of the corporate information. It adds a custom template for the top-level homepage, but that’s about it.
- We then have a number of further Defra-branded child themes, defined as children of the ‘base’ theme, but also referencing the ‘root’ stylesheet for colour and branding. Depending on functionality, there may be additional templates or functions: so for example, the News theme/site has its own homepage, and the theme used by the Publications and Statistics sites has its own approach to presenting attached files.
- Finally, there’s a ‘custom’ theme for use by sites within the extended Defra family. This uses the same ‘base’ theme for layout; but includes additional WordPress functionality – mostly built-in, if you know where to look – to customise the branding and colour palette via the admin interface. Upload a logo, choose two colours, and bingo – a unique child site, which still retains the basic house style, maintains its connections to the wider Defra network, but whose management can be devolved to an arms-length business unit. Everyone’s a winner.
Needless to say, there are countless custom functions behind the scenes to stitch it all together – simple things like forcing a particular sitewide tab to be highlighted, to make a child site seem like it’s within a particular branch of the corporate site. (Although actually, that one wasn’t simple at all.)
And there are one or two new custom plugins which add pretty significant functionality, including one to implement a site-wide shared taxonomy. This has the potential to automatically surface related items across the network, and is pretty exciting – although we won’t see its benefits for some time.
As you can imagine, moving such a large quantity of material into such a radically different publishing model has frequently been challenging. We’re still finding our feet in certain areas, and it goes without saying, we’re pushing WordPress harder than ever. A few glitches here and there are inevitable; but we’ve had nothing too catastrophic. With a proper staging environment now in place, all our code being managed through Subversion, and a WordPress-based bug tracker to log any issues, it’s all gone relatively smoothly.
I can’t say enough about the contributions from Simon Wheatley and Team Defra; my front-end work was completed pretty early on, and I’ve really just been a spectator whilst the serious lifting and shifting has been happening. But once again, the Defra guys have been an absolute pleasure to work with, giving us more room to experiment and innovate than we’d ever dare ask for. Thanks guys.
This morning saw the launch of a new website for Defra, the Department for Environment, Food and Rural Affairs. It looks remarkably like their old one, which was placed in suspended animation after the election. Almost identical, in fact. But behind the scenes, it’s a completely different story.
Thus far, Defra’s website has largely been managed manually, one page at a time, using Dreamweaver. They started using WordPress two years ago: first a blog, then a Commentariat-based commentable document. Puffbox got involved about 12 months ago, helping develop a couple of microsites. And internally, they’ve been running a few pilots, notably with their press office. It’s all been building up to this morning’s unveiling of a new corporate website structure built on a WordPress 3.0-based multisite install.
The ‘top level’ consists entirely of pages (rather than posts) – a fairly modest number to start with, but all thoroughly reviewed and re-edited. Beneath this will be a collection of subsites, of which only one is in place so far, but it’s probably the most significant one – News. There’s a parent theme plus one child theme; most of the presentational elements are defined either in the parent theme, or the ‘top level’ site’s settings. But of course, the subsites also feed content up to the top in some places, such as the News area of the top-level homepage.
It feels like we’ve pushed WordPress to its limits on this one, or certainly closer to its limits than we’ve ever gone before. Files and images are uploaded and managed through WP’s interface, allowing us (for example) to generate and summon thumbnails of multiple sizes for the homepage, whilst storing the highest-resolution images for unspecified future use. 😉 We’re making heavy use of WP3.0’s new ‘custom menus’. We do intend to use comment functionality, although not for ‘conventional’ commenting. And of course, the whole concept is based on WP3.0’s multisite function: I wouldn’t have been comfortable building this on pre-3.0 MU.
Meanwhile, behind the scenes, we have multiple load-balanced servers, and all sorts of WordPress caching magic – which, although it doesn’t sound exciting or glamorous, is what really lifts this project into the realms of serious web serving. Hopefully by now, you won’t be in any doubt that WordPress can do plenty – but the question often arises, can it do it at scale? Yes it can – but it’s much, much more involved than simply installing a plugin or two. (And sadly, I’ve seen too many instances lately where developers without much WP experience haven’t appreciated that.)
There’s so many other little things I could mention: a quick custom plugin to do X, a little widget to display Y, a dash of jQuery to do Z. And then there’s the other things we’ve built, but haven’t used or activated quite yet. In fact, to be honest, it’s a little frustrating that so much ‘cutting edge’ stuff is concealed behind a year-old front-end.
Mere words are not enough to express my gratitude to Simon Wheatley, whose genius was only exceeded by his dedication on this one. The Defra gang have been fantastic too: they’ve done great work over a long period to reach this point. And they gave us more freedom than we would be entitled to expect, to do it ‘our way’. Thanks, everyone.
The biggest surprise about the transition to the new coalition administration is how few surprises there actually were. A quick tour of the departmental websites reveals, for the most part, the exact same websites that were there before – albeit a little lighter on content, and with new faces in the About Us section. It’s all gone commendably smoothly.
But one or two departments have taken advantage of the situation to revamp their web presences: and it’s been our pleasure to assist with one of these already – with more, perhaps, to follow.
In the run-up to Polling Day, we were asked by COI to provide cover for any ’emergency’ web building which might result from the arrival of a new administration. Steria provided a hosting environment, with WordPress MU pre-installed; and I worked with Zed1’s Mike Little to develop a theme which could be deployed and managed centrally, ideally very rapidly – but still be easily customisable for each individual site which used it.
In the end, there weren’t any major Machinery of Government changes which required it: but Defra recognised the opportunity, and are using it as a base on which to start rebuilding their corporate website. They’ve worked with Puffbox on a few WordPress-based microsites already this year, so it’s familiar territory for them – and in truth, I think it’s been coming for a while.
The theme is fairly plain, sober and generic: inevitably, given that we had literally no idea who might need to use it, or how. There’s a rather nice homepage carousel, managed via the WP media library; a widget-ised sidebar and ‘fat footer’; plus special page menus at the top and bottom. It makes for quite a nice little site: certainly enough to get things started.
But whilst the design itself might not win awards, the behind-the-scenes stuff is pretty smart. We’ve enabled WordPress’s ‘custom header’ functionality on the theme: users simply need to create a graphic of predefined dimensions, upload it into WP, and it’ll be used as a full-width banner across the top (with the search form and – optionally – department name overlaid). In Defra’s case, they’ve gone for a fairly plain black logo on white; but it could have been a lot more creative if they’d wanted. When we’ve tried this in test, we’ve found it can produce quite dramatically different ‘feels’ to the theme.
And then there’s the colour palette. The theme’s style.css file avoids defining most of the colours used on the page. Instead, there’s an options page in the WordPress backend, where you can enter the colours to be used for specific page elements: links, the ‘blobs’ in the sidebar and ‘fat footer’, and so on. These are saved in the database table of options for that specific blog only; and the custom CSS gets added to the top of each page as it gets generated. (It’s effectively an evolution of the work I did for BIS on Science & Society, but it takes the concept to a whole new level, and opens up all sorts of possibilities.)
But of course, the most significant aspect is the centrally managed hosting environment, and the official recognition of WordPress as a suitable tool for the job. Precisely what I’ve been proposing on these pages for ages. And you know what? I think it actually worked.
In the late March dash to complete jobs before the end of the financial year, not to mention the imminent election declaration, I pushed a couple of websites live without having the time to blog about them.
One of these was another little job for Defra: a WordPress-based satellite site for their Science Advisory Council. It’s a fairly modest site, sticking very closely to Defra’s house style, and based to a significant extent on previous work I’ve done for them. But it does have one innovation worth flagging.
The site’s main objective is transparency, making documents from its quarterly meetings publicly available. Inevitably, like it or not, that means a lot of PDF files. WordPress’s media library function makes it easy to upload these as attachments to posts (or indeed, pages): but we had the idea to take things a step further.
One underused feature of WordPress is the ability to add ‘custom taxonomies’: distinct classifications based on either the (hierarchical) category or (freeform) tagging model. But if you’re smart about it, you can also hook this same functionality into the media library – allowing you to add ‘tags’ to the documents you upload. And once you’re doing that, you can benefit from all the other features you’re used to with tags and categories.
So there’s a page on the SAC site which presents this custom taxonomy (unimaginatively labelled ‘Upload tags’) as a tag cloud. Click on a tag, and it takes you to an archive page of all uploads (ie PDFs) relevant to that tag – eg meeting minutes – which can be based on a special page template. (And you can also get RSS feeds of each element in the custom taxonomy, by adding ‘/feed’ to the URL in the usual way.)
We’ve also written a routine into the standard post template to extract details of attached files, and present them automatically in a nice table, with a bit of automated metadata too – see this page as an example.
There are plenty of reasons why you shouldn’t rely on PDF as your primary publishing channel; but sometimes, you have to accept it’s the only practical solution. And in this case, I hope we’ve shown it’s possible to make something of a virtue of it.
Over the last few months we’ve been doing a few little projects with Defra: first came the UK Location (micro)site, and I mentioned there was ‘at least one more’ in the pipeline.
The second project emerged a few days back: a ‘commentable page’ platform, in the style (as Steph rightly observed) of the now-legendary Commentariat theme. In fact, I handed over my part of the work some time ago; but the Defra team have taken things a step or two further, embedding it even deeper into their ‘house style’.
This kind of ‘new light through old windows’ work – where I build a WordPress site to match or slot into an existing design – has probably accounted for about half my (new) projects over the last six months or so. It’s much quicker for me, and hence much cheaper for clients. It’s usually as simple as referencing the parent site’s CSS files; stripping their page templates down to empty shells; then dropping in the required WordPress functions, and building new CSS around them as necessary. It cuts my bill by about 50%, maybe more. And because you’re removing most, if not all, of the subjective elements, things tend to run much more smoothly too.
Maybe this is a pointer for how we can take WordPress deeper into large corporates. It isn’t about replacing your entire Existing Arrangement with a young upstart like WordPress in one fell swoop. Inevitably, certain sections of your website will lend themselves better than others to WordPress’s natural preference for chronological presentation, commenting, RSS feeds, tagging, and so on. And if you’re smart in terms of how you code it all, how you structure your navigation, and how you pass data around (most likely using RSS feeds), the join can be made barely visible.
If you’re looking for a nice example of this: look at the integration of www.parliament.uk and news.parliament.uk: the latter runs on WordPress, and delivers its content – including images, by the way – back into the parent site via RSS. (Disclosure: I had a very minor role in it.)
For those interested in the technical details: it’s a WordPress MU installation (although of course, that won’t matter for long); meaning the Defra team are able to generate new sites under the ‘engage’ subdomain with just a couple of clicks. I think they’ve altered the default theme I handed over, for tighter integration into the site structure; but even then, it’s just a case of editing the HTML around the WordPress code, all of which will be instantly familiar as it’s using their existing stylesheet.
We’ve got one more project with Defra in the works: hoping to get it out there within the next couple of weeks.
One department making steady steps into WordPress has been Defra: it started with a ‘public beta’ blog on third sector issues late in 2008, then a Commentariat-based consultation in mid-2009. I’ve been working with them since late last year, and the first fruits of that relationship are now starting to appear.
First to go public is a microsite for the UK Location Programme – which you probably won’t have heard of, but is all about EU-wide interoperability in geographic data, so it may well be of interest. They needed a website which they could manage themselves, rather than through the central Defra web team; and were open to online consultation methods. Ideal WordPress territory, in other words.
The site is closely modelled on the Defra corporate site, even going so far as to use the same base stylesheet. Behind the scenes, it’s the usual combination of WordPress posts and pages, with the former handling news updates, and the latter everything else. Inevitably we were looking at lots of downloadable PDFs and Office documents; so I’ve done a custom ‘widget’ to display the latest file uploads (excluding images), with the appropriate filetype icons.
The human element on this one could be interesting too. The project’s communications manager is an iPhone owner; and we’ve already experimented (successfully) with him updating the site via the excellent WordPress iPhone app. All being well, you’ll never notice; but it opens up all sorts of possibilities.
The site is sitting in some modestly-priced ‘sandbox’ hosting space, and came together in less than a week. In quite a few respects, it’s more advanced than the main Defra site; and I’m hoping they’ll see how WordPress could help at the top level too. Watch out for at least one more Puffbox-Defra collaboration in the next few weeks.
Two major departmental website changes (that I’m aware of?) today – a completely transformed website for Defra, and a new look for BIS’s corporate site.
The Defra site feels like an incremental improvement of what went before. Gone is the blocky layout and earthy (and somewhat apt?) colour palette, replaced by the de facto standard tabs and colour gradients, and a slightly esoteric colour scheme. It’s clear a lot of thought has gone into site structure, particularly at the upper levels: a friendly homepage highlighting good feature content, and meaningful tabs.
I like it. But it’s a bit disappointing to learn that ‘[they’ve] had to change the web addresses for most of [their] information’ – and I think they’ve missed a trick by not at least trying to redirect some of the key pages.
For example, when you search Google for Defra, you get a list of eight key pages as well as the site homepage – ‘bringing pets to the UK’, ‘animal health & welfare’, ‘your questions answered’ and so on. Only two of these eight links lead anywhere still meaningful. It should only take a minute to add a few ‘301 redirects’ manually. And there’s still no RSS on the site. Grr. These days, I have to say, I think it’s a must-have. Even a reference to the feed generated by COI’s NDS-generated feed would be a help, guys.
BIS meanwhile have changed the design of their ‘pulled together in 3 days‘ corporate site: it now looks much more serious, considered, and dare I say it, conventional. I don’t mean that as a criticism; but the previous incarnation felt so much more agile, innovative even, and I’m going to miss having it there as a wonderful case study. Sniff.
The great news is, it’s still running on WordPress. So in fact, it’s probably just as useful a case study: proof that WordPress can do ‘conventional’ too, if that’s what you want. And with the volume of content in the new site structure, it looks like it’s there to stay for a bit longer, too. Steph and Neil have a bit more to say, including details of some interesting things happening behind the scenes: and fair play again to Steph for open-sourcing his coding work.
Just to note that Defra is using WordPress to power its new consultation on Food 2030: a fairly straightforward use of Steph’s Commentariat theme, with a bit of Defra branding added. So nothing too clever, but as I’ve said before, I think it’s a very good thing if we’re clearly seen to be reusing the same code.
It’s not the first Defra use of WordPress of course; their third sector blog – in ‘public beta’ – has been pumping out the posts steadily since late 08, although comments are a bit thin. Both sites look to be on the same server, but the root URLs (‘blogs’ and ‘sandbox’) are not aliases of each other.
Oh, and I had nothing to do with either of them.