The new Old Guard – Part 2 – Technical

In the previous article I covered the history, design, branding and the aims of this new site. I also want to talk about the technical work that went into it, as well as recommending some great resources I used.

The plan

The first stage of planning the site build was choosing a platform. After dismissing some of the more lightweight blog platforms I was left with WordPress or plain HTML to choose from. I wanted to create a site that was so clean and flat that putting it on WordPress could be overkill, especially if I plan on writing sporadic articles which could possibly be easier to just build as a flat page.

The decision came down to a few key features I wanted (mainly categorisation and an RSS feed), and after looking into generating an RSS feed from static content and not really finding an ideal solution I decided to go with WordPress.

The next stage was to set about bending it to fit the site structure and style I wanted. My key aims were:

• Having a clean URL structure – no p=22? nonsense going on at the end of each link you see on some WordPress sites. I wanted tidy, meaningful URLs.
• To use WordPress but not let the user know – it should feel like a flat html site. I wanted to remove all unnecessary features and bloat.
• Start using at least the basics of HTML5. I don’t build too many sites anymore so this was a good opportunity for a first proper HTML5 project. I am going to start with the basics for now, hopefully adding to this later – this will be an agile site which evolves over time.
• Remove as much unnecessary code as possible.
• Make a CMS based site work as well for SEO as a flat site.

Tech resources

Some of my requirements were just a case of stripping back code and adding my own, while others required some extra scripts to help. Here’s a breakdown of everything I used:

• Latest version of WordPress – the platform behind the site.
• HTML5 Starkers theme – the basis for the sites theme. A great starting point but a little too extensive for what I needed, so quite a lot was deleted!
• HTML5 shiv – This gives older browsers a helping hand to understand the new HTML5 coding.
• #grid – Very useful if you are building a site with a strong grid/column based layout. Hit g to see it in action.
• Tool tips – These are used on the category icons at the start of each post.
• jQuery – If you have got this far I will assume you know what jQuery is! The HTML5 shiv, #grid and the tooltips all use the framework.

WordPress Plugins

Adding extra functionality into WordPress:

• Category Icons – This is creating the icons you can see above the title of this post. It uses your list of categories in WordPress and enables you to assign an icon to each.
• Custom Permalinks – Pretty self explanatory – custom URLs. Allows you to create a friendly link for any page, category or post on the site.
• Google XML Sitemaps – This is great, I pretty much set it up and can now forget about it – my XML sitemap is taken care of and updates automatically.
• Headspace2 – Great plugin for having custom title, description and keywords for each post or page on the site.
• iRobots.txt SEO – Along the same lines as the sitemap this can be setup and left and sits in the background doing its thing – maintaining a robots.txt file for the site.
• WordPress Database Backup – Automatically sends me a backup of my WordPress database each week by email.
• WP Super Cache – Speeds up page load times A LOT.

So far I have been really pleased with all of these plugins. They have all worked flawlessly – no clashes or errors and they have done exactly what I wanted.

The big G

Some of the web services from Google used on the site.

• Google Analytics – Free analytics software from Google – I imagine most people reading this probably either know of or are using Google Analytics.
• Webmaster Tools – Fewer people seem to know about Webmaster Tools. It’s a great set of tools from Google, which tell you lots of interesting information about your site. This is also where you can submit a sitemap to Google.
• Excluding your own visits – If you do not have a static IP this tutorial shows you how to filter your own visits out of your Analytics data.

Most people will have heard of these services, but I thought it was worth mentioning WMT and the exclude script. The latter especially as it works with the latest asynchronous code snippet, whereas other solutions I found were for older snippets.

All done

Through a mix of coding, plugins, javascript and late nights I managed to meet all of my original criteria for version four. As I mentioned earlier though, I hope to refine, update and add new functionality to the site on a regular basis.