mabujo Just another WordPress weblog Wed, 12 Feb 2014 17:10:23 +0000 en-US hourly 1 Redesigning a WordPress site from the ground up Wed, 12 Feb 2014 17:10:23 +0000 I’ve written here a little before about my football blog,

The site started on the 3rd of February 2013, and for the recently passed first ‘birthday’ of the site, I wanted to create an all new, custom design.
When we started the site, we wanted to just get up and running as quickly as possible, so having acquired the domain name, I spun up a server, installed wordpress, bought a ‘premium’ theme and got writing. We got a logo designed and for the first year of the site it was running the hades theme from

Here’s a gallery of how the site looked for the first year :

Now, running the site with a decent purchased theme was a good way to bootstrap the site in its first year, but using someone else’s theme comes with a few problems :

  1. Branding – Obviously, the site is not completely unique in style, there are other sites out there using the same theme
  2. Unless you rip deep into the theme, you are hostage to the theme coder’s personal preferences (and possibly errors)
  3. Theme updates – If you do modify the theme extensively, apply updates from the theme author becomes a big diff and merge job
  4. Bloat – This was the main problem for me eventually with the theme we chose, the theme had a huge amount of stuff built in that we didn’t want or need, and served up multiple unnecessary javascript and CSS files which, even after removing as much as we could (dependency whack-a-mole fun!) were still slowing down the site

So having decided I wanted to get away from that, I drew up some goals and requirements for the new site. I won’t go into all of these here but the main principles were :

  1. Responsive design – At this point, unless you have a very clear plan of a way to do it better specific to the site, then all new sites should be built with responsive web design.
  2. Mobile first – Kind of a subset of responsive design, but build the design for mobile devices first and then expand the site for higher resolution devices. This was the first site I’d built in this manner, and I found it to be very efficient both in terms of work-flow and the best option for speed and rendering on all devices.
  3. Content focused – Proven Quality is a site dedicated to quality football writing, so the content has to be the most important thing on the site. I wanted to make a clean, minimal design that gets out of the way to put the focus on the content.
  4. Ease of navigation – With the previously stated goal of being content focused, I wanted the site to be easily navigable on all devices. The site needed to display the content in a beautiful way so that the user can enjoy the content with two secondary goals – firstly that the user will navigate the site to find more content that interests them, and secondly to make it easy to share the content with their friends.
  5. Social – I already covered this in the point above somewhat, but content based sites depend on being shared to grow their readership. The site should have social sharing features to encourage the reader to share the post on the main social networks without compromising the minimalism of the design or slowing page loads (standard sharing buttons are ugly and slow to load, so they’re right out).
  6. Chronological – I like the blog format, and displaying all posts from newest to oldest. It’s a pattern which users are familiar with and I think it works well. The old theme has a number of different sections, sliders e.t.c. on the homepage which I don’t think work well for usability. Articles in multiple categories (we use categories for teams and tags for players and managers) can be displayed in multiple places and there was no way to chronologically browse back through all posts. I wanted to simplify this, and get back to a chronological blog format.
  7. Fast – The site should be fast, really fast! Slimline the code, make better use of caching to make pages load fast so as not to discourage the user from browsing the site due to unnecessarily long loading times.

With all that in mind, I decided that the best way to move forward with the site was to take the time to build a completely new theme, from scratch. Well, not exactly from scratch, as I did use some libraries in the process. I started off with the bones blank wordpress theme as a base. I searched around a few different skeleton themes and bones seemed to the best job of setting up a few sensible defaults for a HTML5 site without getting in the way of development.

Starting with the mobile version, I decided to make a sort of native app-like view of the content, so I added a fixed header at the top with a navigation menu at the left of the header and a sharing menu to the right. I used mmenu jQuery plugin to make these push menus slide out from their respective sides of the screen and hammer.js as an addon to allow the user to open the menus from anywhere on the page by swiping from the left or right edges of the screen. I think this makes for a pretty cool and accessible mobile experience.

For the desktop version of the site I didn’t want the site to look cramped into the middle on large screens either, so I made the site expand to pretty wide on large screens, up to a sensible maximum line-length for the content. The home page and list pages use a 3 column layout, 2 posts side by side with a sidebar. I used some nice web fonts and tried to create a sense of space around the content by paying close attention to both horizontal and vertical whitespace. The mobile slide-out menu becomes a standard horizontal drop-down menu and as we don’t have the mobile sharing slide-out either, a simple share icon is displayed under the byline, which, when clicked slides down a simple sharing menu for the most common sharing methods. There are a couple of enhancements on the desktop site which are not on the mobile site. A simple back to top button shows up a little ways into the article (it’s pretty easy to scroll to top on a mobile device and otherwise the button would overlay the content), and towards the bottom of the article, a small box fades in, inviting the user to view the next article. If you wanted to, on the desktop version of the site you can start at the most recent post and go back through all articles on the site just using this box.

As I mentioned, I wanted to keep the functionality of having share counts for the social networks without impacting page load times, on desktops they can be slow and even if loaded asynchronously, on mobile networks this all adds up to extra requests and latency. The approach was pretty simple, to handle it server side and store it in a wordpress transient (which are thereafter served up by memcached). This is refreshed once an hour for the site as a whole (twitter followers, facebook fans e.t.c.) and on demand for each once an hour for each page (with cache priming, this represents little impact to the user). This handles it nicely, and we can then use those counts in a pleasing way on the site. I made the aforementioned dropdown in the post byline, and some consistently themed shared buttons for the bottom of posts. I also used the total counts to make a widget displaying the Proven Quality social accounts, with fan count blended into the background div.

For icons, I used fontello to create a custom icon font containing only the icons needed for the site. This reduces requests (only one request for all the icons on the site) and means we don’t need to load a whole load of unused icons from, say font awesome. Using an icon font means that all of our icons look lovely on high DPI devices too. Good stuff!

All of these little optimisations add up to a big difference and means that for a typical page, we serve up :

  1. The HTML page (gzipped, of course)
  2. One CSS external stylesheet.
  3. Our web fonts (from Google’s API)
  4. Our icon font
  5. Modernizr
  6. jQuery
  7. One site javascript file
  8. Analytics code
  9. And the logo (base64 encoded and embedded into the stylesheet on mobile, loaded by URL on desktop).
  10. Plus whatever images are on the page

Get most of that served from CDN and the site really pops!

For the last point, site images I looked into various adaptive image solutions. The idea being to serve up only the size of image required for that device. There are a few different solutions out there, but they’re all ‘hacks’ in a sense and, having got the page load time reduced enormously seem like overkill. There is no doubt that there applications for adaptive images, but at this point they are less than perfect and, in my case not necessarily worth the effort.

It’s probably better to visit the site to see how it looks now for yourself, but here’s some screenshots of how the site looks at time of writing :

That’s all, what do you think? Speaking or re-designs, it’s about time I did something with!

]]> 0
Working with a local language school and other updates Wed, 04 Dec 2013 13:37:21 +0000 It’s been a while since I wrote an update on what I have been working on, so I thought I’d make a little post recapping recent efforts.

I’ve recently had the pleasure to work with a local language school to create their presence online. The site is Hola Lola – Cours d’espagnol à Tours, and if you don’t read French, that’s a business supplying local students with lessons in Spanish. The site was built in WordPress – which is becoming increasingly annoying to work with if you ask me – I’ve been getting into Laravel for bigger projects and the Slim PHP framework for smaller stuff. Still, creating sites for non-technical users requires you to provide them with a backend where they can edit their content and WordPress is still the most user-friendly solution for this. We’re hosting the site for Hola Lola as well, and I wanted to test a new host I had heard about – Digital Ocean. At $5 for their cheapest ‘droplet’, it’s a pretty good deal. Their help section is easily one of the best in the industry and I was able to get PHP 5 + nginx setup and running smoothly in no time. Job done!

The Hola Lola site was built to be fully responsive to ensure a smooth experience on desktop and mobile alike. I designed the logo for the company as well, which was something I really enjoyed brainstorming with the client. I also designed business cards, flyers and posters for their offline marketing efforts, and will be helping with this going forward. Offline marketing is something I haven’t had much experience in, so this has been an interesting and challenging experience. Online, I’m also looking to work some schema data into their pages (I love structured data!) to help them be found better locally.

Progress on Proven Quality, our football blog has been going well since we launched in February. We’ve featured the work of 32 different writers so far, and the site has started to grow an audience interested in in-depth football writing, which is great. The site is now featured in Google News and the NewsNow aggregator amongst others, which allows us to get the stories out in front of new users everyday. With 246 articles published at the time of writing, there’s something for everyone. My focus has been on promotion of the site, getting the word out and keeping the standard of articles very high. I think that’s going well, and I’m lucky to have some extremely talented writers publishing their work through the site.

That’s all for now, I do have plans to re-work the mabujo site in future as it hasn’t really been touched since 2008! Have fun out there.

]]> 0
Starting a new blog… Thu, 14 Feb 2013 18:46:44 +0000 Last week I started a new football site called Proven Quality. It’s not as easy as it used to be to get new sites moving nowadays, is it?

As I acknowledged in my opening post, there a lot of football sites out there. But here’s the thing, most of them are (and trust me, I’ve read more than most) are… How to put this… far from great. Not to say there aren’t already some amazing football sites, there are, but they are few and far between.

There must be 1000s of sites, all churning out and endlessly regurgitating the same stories with little value added.
I wanted to do something different.
That’s why I’ve put together a team of talented writers and have given them the remit to create long-form articles about football, tactics, and it’s social impacts.

A little over one week on and we’ve already posted nearly 20 articles, all of which are, in my entirely un-biased opinion, absolutely fantastic.

On the technical side of things, I’ve gone with good ‘ole WordPress for the CMS, for it’s ease of manageablity and speed of setup. Like the rest of my new servers that I’m deploying lately, I’ve ditched Apache for Nginx, MySQL for MariaDB / Percona (in this case MariaDB) and have sat Varnish in front for caching. I can’t say enough good things about Varnish. It has saved me enormous amounts in server costs already, it’s a breeze to setup if you know the hierarchy of your site and where you will serve cookies, and it makes scaling to mid-size very very simple.

I realise that the number of people interested in in-depth of analysis of football is far smaller than those interested in transfer rumours and football memes. I realise that getting Proven Quality in front of these people is going to be a challenge. But I like a challenge, and I’m going to give it a shot.

Until next time, back of the net e.t.c.

]]> 0
Responsive Hotaru theme released Fri, 06 Jan 2012 18:10:03 +0000 Now that I’ve finally managed to set up most of my football sites the way I want them and with some of them getting quite popular I figured it was time to expand the network and make sites for some of the big teams that I left out previously.
I’ve stated out making Man United Latest – at the time of writing it is at a very earlier stage, but this post isn’t really about that exactly, it’s about the way I’m setting up the site that is different to what I have done previously.

Previously with my Hotaru sites I have been using the mobile plugin to allow the sites to be viewed on (you guessed it) mobile devices, however there are a few problems with this.

Firstly, the plugin doesn’t really follow the Hotaru way of doing things – not all of the front-end is customisable through your theme and some things are hard-coded in the plugin folder. This is ok for one site but for a network of sites it starts to be a bit of a pain to find where to change things every time.

There are a few other niggles I have with how it works that I won’t go in to but the most important problem is that this plugin creates 2 versions of your site.
For example this post is also available via the mobile version with a different URL. The fact that the URL is different is what annoys me most, and the problems with search engines that can bring. I’ve tried blocking the google web spider from the mobile version of the site and the google mobile spider from the web version of the site but I’m not convinced of this as a solution. Ideally I’d like if someone searches for Arsenal News on the web version of google for them to be taken to the main version and if they search on the mobile version, or search for Arsenal News Mobile, for them to be taken to the mobile version.

In short, I haven’t been able to achieve this, and duplicate pages and canonical content issues aren’t exactly fun.

For the existing sites I kind of feel that I am stuck in this situation with the 2 versions of some of the sites some what established, I could possibly re-direct but I’m not ready to just yet.

However for future sites I would like to avoid this problem and this (eventually!) is what I want to talk about in this post.

If you’re not familiar with responsive design, there are plenty of people who have already outlined the approach much better than I ever could so I shall refer you there. However, the main idea of it is to design a single site that is capable of adapting to the user’s browser, whether it is a smartphone, a tablet, a laptop or desktop. A single design, a single code base.
There are of course a different set of problems associated with it, but at this time, for my needs (and the needs of most) I think it is the way to go.

All that to say, when I’m making sites now I tend to be making them using this approach, and to get me started I thought I would make a responsive version of the default Hotaru theme, both as a responsive starting point for my Hotaru projects and to release to the community. So fill your boots, the first responsive hotaru theme is available here and there is also a demo.

]]> 0
Taking a busman’s holiday Wed, 06 Jul 2011 08:04:45 +0000 I’ve been getting into the whole google+ lark since it launched, so I took a little busman’s holiday from programming my twitter management application yesterday to whip together google+ developers.

I’ve been working on tweepler for a few months now and it is always nice to have a change of context – a change is as good as holiday as they say. (I promise that’s the last tired cliché for this post).

Google+ Devs aims to be a resource for developers once a Google+ api is released, an until then I will be chronically all the little hacks that surface for the platform.

]]> 0 launched! Wed, 15 Dec 2010 22:01:10 +0000 I have hinted  that I was building this site in a few previous posts where I was talking about my Hotaru CMS plugins and themes, and today I am very excited to announce the launch of my Premium Hotaru CMS Template store!

It has taken a few weeks of hard work, planning, testing and late nights to get this point but I am really pleased with how it has all turned out in the end.

The Hotaru Themes site is launched with a selection of 3 premium themes available, those themes are Bandini, Leon and Oscar. Each of the themes have a demo site which you can find a link to on the theme pages.

On the technical side of things, the site itself is built on WordPress with the phpurchase e-commerce plug-in handling the cart and payment end of things. I was pretty pleased with the ease of implementation phpurchase offered, I was able to set up the WordPress install in a way I was familiar with and use shortcodes from the plugin to drop in the e-commerce functionality.

I hope that in the future I will be able to add lots more free and premium themes to the Hotaru themes site and I will continue to support my current free themes and plugins as usual. The only change is that I may look to mirror some of the free themes offered here over to the Hotaru Themes site.

That’s it for now, Merry Christmas!

]]> 0
Facebook Open Graph Hotaru Plugin v0.5 released Tue, 05 Oct 2010 11:59:21 +0000 I’ve just finished coding a new version of the Facebook Open Graph plugin for Hotaru that brings it up to version 0.5.

This version enables the plugin to work with Tie’s existing Post Images Hotaru CMS plugin.

If you have the Post Images plugin installed, the Facebook Open Graph plugin now gives you the option to use images from the Post Images plugin as Open Graph meta images, so when someone likes or posts a link to a story page from your site, if it has an image from Post Images, then that image will be displayed in the users Facebook stream alongside the story, instead of the default image you could previously set.

I’ve updated the Facebook Open Graph plugin page with the latest version, which you can also download here : Facebook Open Graph v0.5.

In other Hotaru CMS development news, I’m currently coding my first Hotaru CMS Premium Theme which I hope to be able to release soon.

]]> 1
Isis Theme updated to V1.1 Fri, 01 Oct 2010 16:52:57 +0000 Just a quick note to let everyone know that I have updated Isis Hotaru CMS theme to version 1.1.

This is a fairly simple update as the theme would not work properly with versions of Hotaru after 1.3.

This rectifies that, so if you are using a newer version of Hotaru CMS than 1.2.0, you will want to upgrade this theme.

You can download Isis theme and read more about it on the Isis Hotaru Theme page.

There is also a demo of the theme here.

]]> 0
More fun with the Twitter API, new site launched Wed, 08 Sep 2010 12:03:51 +0000 Since my last post on posting tweets from an RSS feed with OAuth, I have been spending a few fun hours having a play around with the various Twitter APIs and have created a new twitter app.

The app is certainly of niche interest but it was fun to build anyway. The site, called #lfcfollowback, builds on a hashtag that fans of the Liverpool football team use to identify themselves on twitter. The idea being that users append the hashtag to their tweets and will be followed by other Liverpool fans (and implicitly agree to follow those users back).

I have a twitter account (@NewsLiverpool) for my Liverpool FC News site and hadn’t really joined in with the #lfcfollowback concept because I felt that using the existing twitter search it would take too much time to reciprocate in following all the users back.

So that’s why I made the lfcfollowback site. On to the technical details…

It’s a very simple app built from a single twitter search on the back-end. It’s all coded in PHP with heavy use of JavaScript for the front-end. There’s a script that is called regularly by cron that searches twitter for #lfcfollowback (using the twitter search API) and adds any users it finds that has tweeted ‘#lfcfollowback’ to the database.

There’s some more simple functions for the frontend that read users from the database and handle outputting the list of users to the site and pagination e.t.c.

The real magic is all done with the new(ish) twitter @Anywhere API. Similar in function to Facebook Open Graph, the @Anywhere API creates a platform for external sites to add twitter connectivity and functionality to their sites. In the case of the lfcfollowback app, I used the Anywhere API to allow the site to connect to their twitter account, to display hovercards for users, and facilitate following of other #lfcfollowback users.

All fairly basic stuff to implement, but the initial response from users has been very positive.

]]> 0
Posting from an RSS feed to twitter using OAuth Thu, 02 Sep 2010 12:55:07 +0000 Being the lackadaisical webmaster that I am, I hadn’t noticed any of twitter’s recent announcements that all scripts using api access to twitter would need to authenticate via OAuth instead of basic password authentication.

I had been using a php script to take stories from my RSS feed, shorten then with the URL shortener and post them to twitter. The script stored the twitter account username and password and was logging in and posting the tweets.

As per twitter’s OAuth announcement, at some point on September 1st 2010 the script stopped posting tweets from my RSS feed.

This tutorial will show you the script I use to post tweets from RSS and how I got the script working again with OAuth.

The original script I was using was created by Paul Stamatiou and I had made a few modifications. The new version uses some OAuth stuff from Tayeb and the twitteroauth library from abraham on github.

The first thing we need to do is login in to twitter and create a new application at

Give the application a logical name and fill in the other fields. Application Type should be Browser, Default Access Type should give Read & Write permissions and you should check the Use Twitter For Login box.

Once you submit the form you will be taking a page that shows your Consumer and Secret Keys and some twitter authentication URLs.

You will be needing the Consumer and Secret Keys so keep the tab open for later.

Next you will need to grab the twitteroauth library from

You can grab it easily from git on Linux by doing :

git clone

from the command line.

We’re going to be using the twitteroauth library to create oauth tokens for our app.

So, create a new folder and upload the files to your server. Let’s say we upload all of the files under

We need to edit the file config.php to include our keys from twitter and our callback URL.

So open up config.php and go back to that application details page and use the keys to fill in config.php like below. You will also need to specify the callback URL as callback.php in the folder where you uploaded the twitteroauth files.

define('OAUTH_CALLBACK', '');

Next you will need to goto
Load that page in your browser, click the Sign in with Twitter button and follow the instructions to give your application access to the account you want to post your RSS items to.

Once that’s done goto, click the name of your app and then click ‘My Access Token’ from the bar on the right.
This page gives us the remaining 2 oauth tokens we will need to authenticate the script.

At this point we only need a couple of files from the twitteroauth library and don’t need the whole twitteroauth folder to be on our server any more as we were just using it to authenticate ourselves.
Create another new folder on your server, lets call this one tweets, so it should be something like
This folder will be permanent and contain the scripts to automatically post our RSS items to twitter.
In the twitteroauth folder that we got from git there is another folder inside called twitteroauth (so the full path is twitteroauth/twitteroauth). This folder should contain 2 files, OAuth.php and twitteroauth.php.
Upload this folder with the 2 files to

In this new folder at create a new file called secrets.php and put the following inside secrets.php :

$consumer_key = "YOUR_CONSUMER_KEY";
$consumer_secret = "YOUR_CONSUMER_SECRET_KEY";
$access_key = "YOUR_OAUTH_TOKEN";
$access_secret = "YOUR_OAUTH_TOKEN_SECRET";

(make sure to wrap the above in php open and close tags, I had to remove them because they were confusing wordpress)

The next thing we need to do is add 2 files in the folder; parse.php and index.php
index.php is the file we will call to send our tweets, and it calls parse.php to get the items from our RSS feed.
You can get parse.php from the original .zip file from Paul Stamatiou and then you can either use the index.php from Tayeb or use my modified version below.

My version makes a couple of modifications; it uses the URL shortener instead of tinyurl; it replaces ampersand characters in titles (&) with the html entity, and it automatically shortens the title/tweet and appends an elipsis if the tweet and URL are going to be too long for a tweet.
If you want to use my version, you will need an account at and your API key from

Here’s my modified index.php file.

You will need to replace ‘YOURBITLYLOGIN’ with your username and ‘YOURBITLYAPIKEY’ with your API key. Also replace ‘YOUR RSS URL’ with, well…the URL of your RSS feed.

If you have done everything right up to this point, when you go to it should pull the last few items from your RSS feed and post them to twitter.
If you want this to be automatic (which you probably do!) then just set up a cron job to call the script periodically.

Edit 3rd September 2010 :
Rob Q in the comments asked if it was possible to have a version of index.php which posted only titles from RSS to twitter, while ignoring the links. If you want to do this too, this version of index.php should do the trick.

]]> 35