How we built this site

We can’t be the only cycle organisation or local group which had an extensive, if slightly outdated website. Here’s how we updated to this current version in brief to help anyone else faced with the same challenge.

Our existing website was a range of static HTML pages created over many years in programs like Dreamweaver by a single coordinator. We needed to have a more modern design, and to have something which was more rapidly editable. More time spent maintaining the site was less time spent campaigning and updating our content. We opted to move to a self-hosted blog, using WordPress as we were familiar with it and because we could use plugins to provide key functionality. Everything we list below was tested on a development server which we used over the few days we spent intensively building and testing (in a one man team).

So that we could retain the legacy website, we installed WordPress over the top of the existing site (in a subfolder). This had the advantage of letting us launch much quicker, and retain inbound links and search rankings for all existing pages.

A key concern was search, as inbuilt WordPress search would only search the new content. This is solved by using a plugin called Google CSE (Custom Search Engine) which funnels on site search through google’s index of our entire site. This meant old and new posts are search alike. The only limitation on this is that it is limited to 100 searches/day so please don’t test it too hard whilst trying to learn from us!

The second concern was that we had to rename the original index or top page of the site from index.htm to enable the website to present the new wordpress home page. Rather than place the old site into a folder and cause existing links into the site to break, we simply renamed the index.htm to oldindex.htm and setup a redirect. We use a plugin called 404 redirected to manage error handling, it logs failures to serve a page (404) and direct to an existing page. This enabled us to redirect links to that went to our old index page by name (http://hfcyclists.org.uk/index.htm) to be directed to a post introducing the new site.

However, that obviously left the problem that people might be linked into the old site and fail to reach the new. To enable people to know the new site had been created we modified navigation on every page of the old site to include a note that it was an archived page and link to the new site.

We implemented google analytics on our new site. For extra credit (and fun) we also modified the existing pages in the static legacy site to incorporate Google Analytics as on our new site. This means our statistics will tell us if any of the existing content is particularly popular and a priority to move over.

Design

Design is really very plain. Our header logo was made in Word using our mother campaign logo, the right font (Gil Sans) and our constitution. Constitutionally we are hfcyclists so an initial logo with the name as Hammersmith & Fulham Cyclists was binned. Pro-tip: check your constitution before you start any design work! We also made a square version of this logo to use on our twitter account.

A key requirement was to reduce the effort necessary in updating the site as much as possible. For a couple of hours we explored ways of mapping blog posts in a particular category to a page until eventually we realised we were doing the wrong thing. Instead, we made a custom Menu. This manually specifies the navigation both at the top of the side and repeated lower down in the right hand navigation bar. Into this we place a mixture of Pages and Blog Categories. This means that for a potentially long running campaign we can create updates as and when yet still direct people to all content within our on-site navigation.

Another question of effective effort was listing events. After much experimentation we settled on The Events Calendar plugin. This enabled easy updating of events in the same fashion as with posts, and enabled us to treat events as blog posts in all respects except that of having a category. This then drives the listing of upcoming events which is prominently top right between search and navigation. Unfortunately it doesn’t work with WPTouch, our mobile site plugin so we will examine a long term solution.

Sortable Tables
Whilst adding our statistics onto the site, we thought it would be helpful to be able to sort tables we added, after some searching we opted for FooTable. With filtering and pagination turned off, it provides very simple sort functionality to a table simply by adding a class=”footable” parameter to the table tag, provided that the table already has thead and tbody tags (which WordPress provides if you paste from Excel).

Go-live
When the time came to finally go live (with a consultation deadline rushing towards us and nowhere to post our review) we pushed the site live over a few hours. This meant redirecting our existing URL from the previous live site to a new one (as there was no PHP on our older, more expensive hosting).

Leave a Reply

Your email address will not be published. Required fields are marked *

The Hammersmith and Fulham branch of the London Cycling Campaign