New default WordPress theme: Fourteen Eleven

WordPress theme: Fourteen Eleven

WordPress theme: Fourteen Eleven

With the increase in mobile devices accessing the University website, I’ve spent a couple of hours this week working on a St Andrews themed responsive WordPress theme for our central WordPress multi site installation, WordPress @ St Andrews.

Imaginatively titled Fourteen Eleven this is a child theme of one of the default WordPress themes: Twenty Eleven.

This theme is clean, lightweight, and optimised for mobile use. It offers 12 St Andrews-themed headers, which can also be shown randomly if required. Or upload your own.

Twelve St Andrews themed headers. Or upload your own.

Twelve St Andrews themed headers. Or upload your own.

Next week’s task is to rebrand the Fourteen Thirteen (1413) theme as Fourteen Ten (1410) as it is actually a child of the default WordPress theme Twenty Ten, rather than Twenty Thirteen. This should help us keep track of which theme is a child of which.

New website for the Andrew Marvell Society

Screenshot of Andrew Marvell Society website

While the majority of our work in the web team involves developing and maintaining the main University website, using our enterprise content management system TERMINALFOUR Site Manager we do occasionally get asked to develop sites for other areas of the University such as schools and research centres. It is one such request that I’ve been working on for the last couple of months.

Sometime during the last quarter of 2012 we were approached by Dr Matthew Augustine of the School of English to migrate the websites of the Andrew Marvell Society from their current location, hosted by St Edward’s University in Austin, Texas to a new, custom-built site hosted here in St Andrews.

WordPress

During initial discussions about both features and resources we decided to use our new installation of WordPress multisite. This is something that we’ve been keen to use for many years; a simple lack of resource to support it was, I think, the main hurdle to getting it installed.

While I’ve done quite a lot of work with WordPress as a standalone application, and as part of the hosted WordPress.com service this is the first time that I’ve had to develop for a multisite-enabled installation, and actually the first serious work I’ve done with WordPress for about five years (having been developing with it since version 0.7).

Theme development

Development, I am pleased to report, has been fairly straight forward. We decided to start with a pre-developed, responsive theme (GoodSpace by Goodlayers) and customise it to our requirements.

I selected this particular theme for a number of reasons:

  • Similar design
    It was very similar to the design that I’d loosely sketched out on paper with Dr Augustine. (He had wanted something that was comparable to the look and feel and tone of the Milton Society of American website; Marvell himself was a friend of John Milton.)
     
  • Page builder and shortcodes
    I was very impressed with the theme’s built-in page builder and shortcodes, which seemed to offer a simple way of creating complex page layouts. After all, once I hand it over I’m not going to be the person who is maintaining the site.
  • Speed
    This approach got us up-and-running much quicker than if I had needed to develop a new theme from scratch, even basing it on one of the default WordPress themes.

Having used premium themes before I was pleasantly surprised by the quality of the documentation shipped with this theme. The theme also came with an example site XML file which I imported and then spent a day exploring to understand how the various built in plugins and features worked.

Agile development

I’m using an Agile-style iterative approach to development, with one week iterations (or sprints), regular meetings and demonstrations with Dr Augustine, and using Trello to plan and manage iterations. I’ve really enjoyed this approach.

Trello board showing columns of index cards

Planned sprints for the next three weeks.

One of the principles of the Agile manifesto is “responding to change over following a plan”. I had scoped out the project for the first four sprints, planning to implement a new feature at the end of each sprint (join up form, migrate the newsletter from another WordPress site, implement a bbPress forum, etc.).

I had planned to implement the join up form this week, but I got an email from Dr Augustine on Monday morning saying “my next priority is to get the old newsletter rolled over to the new site”.

Great! So, that’s my next priority now too. I swapped the order of two columns in Trello, renamed them sprints 2 and 3 accordingly and got to work researching custom post types.

That’s the story so far.

We launched the site last Tuesday, three days early, and as you may be able to see from the fuzzy image above we’ve still got things planned out for the next few weeks. In good Agile style, we wanted to get a working site up and running and then incrementally add to it. Which has also been a really satisfying and motivating way to work.

This is fun… I’m going back to work now.

Footnote

By the way, if you’re wondering who Andrew Marvell is, he was an English metaphysical poet and politician who lived between 1621 and 1678. You can read more about the life and work of Andrew Marvell on Wikipedia.

Also, this has been unexpectedly one of the hardest projects I’ve worked on in terms of spelling the person’s name right! His name is Andrew Marvell. I work in St Andrews where we have a halls of residence called Andrew Melville Hall. How many times have I written Andrews Melville?

Developing a new theme for Moodle 2.0

At the start of the current academic session (2010-2011) the University introduced Moodle as its preferred learning management system (LMS), also called a ‘virtual learning environment’ (VLE) and began the move away from WebCT (which is now owned by former rival Blackboard).

Moodle (which I discovered is an acronym for Modular Object-Oriented Dynamic Learning Environment) is an open-source application which of course means that it’s free… up to a point: you still need to install it, configure it and create a new visual theme for it should you require. And that’s exactly what I’ve been doing this week.

screenshot

A dream to work with

Over the last few years I’ve worked on the redesign of quite a few third-party Web applications. Some have been easier than others. One quite literally drove me to tears with frustration. Moodle 2.0, though, has been an absolute dream to work with.

Moodle 2.0 is written in PHP which I have quite a bit of experience with, so that greatly helped. Having the right mental model of how something works really helps when you’re only working with one aspect of an application.

It also helped that we have a very helpful and responsive Moodle development team located within the School of Computer Science who have been great to work alongside.

Great documentation

The way that Moodle have organised how their themes work is logical and pretty clean, and the documentation on developing Moodle 2.0 themes is really good.

And I mean really good: it’s usable. I spent an hour or so carefully reading through the documentation and then got stuck in.

I did what many advise and started with an existing core theme and adapted it for our use, which took me about half a day. The rest of my time was spent working on icons.

Icons

I didn’t really like the default icons in Moodle, they looked quite pre-Windows 3.1. So I decided that I’d try to replace them using the excellent Silk icons set by FamFamFam.

Well, lo and behold if Moodle doesn’t also have an excellent document on how to use images within your theme as well as an example silk icons theme! Someone has already done the work for me!

I discovered that the example theme doesn’t contain all the icons we’re using and it didn’t customize the smilies so I complimented Silk with two other 16 x 16 pixels sets:

All-in-all that gave me over 4,500 icons from which to choose.

Moodle logic for icons, example 1

Something that really helped me was understanding the logic that Moodle uses to determine which icon to use. I was helped by this thread on the Moodle forum.

I discovered pretty early on that if your theme doesn’t provide a particular icon then Moodle will just use its own default icon. You include your own icons within three sub-directories within your theme folder:

  • /pix
  • /pix_core
  • /pix_plugins

Using Firebug or Chrome’s Web developer tools look at the URL of the icon you want to replace.  You’ll see that it looks something like this:

http://example.com/moodle/theme/image.php?theme=newtheme&image=icon&component=qtype_multianswer

The important bits are in bold which are, in order of appearance:

  • newtheme is the name of your theme.
  • icon is the filename of the icon file without the filetype suffix, e.g. icon.gif, icon.jpg or icon.png.
  • qtype is the name of the sub-directory. In this case (I think!) because it’s a ‘&component=’ it is a sub-directory within the pix_plugins directory.
  • multianswer is the name of the sub-directory within the above sub-directory!

In other words, that URL is for an image within this directory:

/theme/newtheme/pix_plugins/qtype/multianswer/icon.png

Moodle logic for icons, example 2

Similarly, the following code

<img alt=”” class=”smallicon navicon” title=”” src=”http://turret-new.cs.st-andrews.ac.uk/moodle-2/theme/image.php?theme=newtheme&amp;image=i%2Fsettings&amp;rev=235″&gt;

will look for a replacement icon in this directory:

/theme/newtheme/pix_core/i/settings.png

You can glean that from ‘i%2Fsettings’, as ‘%2F’ is the URL encoding (also called percent-encoding) for a forward-slash (‘/’), and the word that appears beyond that is the filename of the icon, in this case ‘settings’. As far as I can tell you can use any format you like from GIF, JPG and PNG.

Clearing the cache

The way that our installation is set up, every time I made an HTML or CSS change I had to clear the theme cache which was as simple as logging into Moodle 2.0 and navigating to Administration > Appearance > Themes > Theme selector then clicking on the button at the top of the page: “Clear theme cache”.

Later on in the development I discovered that Moodle was also caching the information about the themes, such as the theme name and any information that appears once you’ve activated a particular theme. I needed to get the Moodle administrator to clear that for me.

Conclusion

This has been a surprisingly fun project to work on. Surprising only because of my experience with other less-well designed systems. I wish all Web applications were this fun and this easy to edit.

Download

A number of people have emailed me asking for the theme and icon set that I developed/extended. Feel free to download the file below, on the understanding that I can offer no technical support on it.

This theme is released under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

About

University of St Andrews is a fluid-width, three-column theme for Moodle 2.0 that was adapted by the University of St Andrews web team, based on a theme called Leatherbound created by Patrick Malley.

Tweaks

This theme is built upon both Base and Canvas, two parent themes included in the Moodle core. If you want to modify this theme, we recommend that you first duplicate it then rename it before making your changes. This will prevent your customized theme from being overwritten by future Moodle upgrades, and you\’ll still have the original files if you make a mess. More information on modifying themes can be found in the MoodleDocs.

Icons

License

This, and all other themes included in the Moodle core, are licensed under the GNU General Public License.

The following zip file is hosted at Let’s Crate.

Download moodle-2.zip (190 KB)