When I recently started looking for contracting web work for the first time in 10 years, I realised one useful skill to pick up would be writing WordPress themes: While I’ve not been looking it seems it has pretty much won the blog wars and along the way became a common CMS choice for small to medium sites, including my first contract site.
Looking round I found a bunch of starter tutorials for folks completely new to teh tubes, but not a lot for those who know their way around markup, servers and databases. On reflection that’s probably because it’s so easy, but what the hey – I’ve started typing now, so here’s my attempt:
1) Set up WordPress
I have a Dreamhost account, with installation of WordPress a siple option in their control panel, but even if you don’t have something similar from your hosting it’s (apparently famously) a 5 minute job: Unzip files to desired web location, create database, link database, run install/setup script.
To run on my desktop I turned to the trusty arms of Xampp, but any up to date PHP/MySQL setup will do.
2) Rummage in the reference theme files
Themes are php and client-side files added to wp-content/themes/ – There is no db entry/admin process required to add them.
By default in WordPress 3 the TwentyTen theme will be enabled. This is the reference theme, so is a good one for developers to poke around to understand how themes work, as each file has extensive commenting and links to the ‘Codex’ WordPress documentation, so you can very quickly start to learn your way round the php files.
3) Install/copy a theme to edit
Most WordPress themes will contain a whole bunch of functional server side stuff that you’re probably not going to change on any given project, so ideally you’d start with a CSS-less theme that just produces solid markup. I had a go at making one of these, but made the mistake of starting with an theme designed for WordPress 2. It’s a mistake I may yet rectify, but in the meantime you could do worse than using this HTML 5 one as a base.
Unzip the files into a new folder in the themes folder (named whatever you like), then edit the specially formatted metadata at the top of styles.css in the theme root (which by the way is a required WordPress file, so don’t move it). This comment block is used by the admin system to describe the theme.
3b) Parent themes
The quickest and cleanest way to create a theme with the same functionality as an existing theme, but different styling, is to use the existing theme as a parent (as I did with Kernel and JaneSexyLegs). Once you specify the ‘template’ attribute in the comment block at the top of styles.css then that ‘parent’ theme will be used as a base, which can be selectively overwritten and added to by adding files to the child. Take a look at the kernel and JaneSexyLegs zip to see a simple example.
4) Import some test content
There’s quite an array of features posts can have, so you want to be sure your theme covers all bases. This set of test data takes a pleasingly unit-test centred approach to its data. Import that (admin > tools > import) and you get a bunch of articles, each trying out a feature, including missing values, many tags, long titles and so on.
The import will involve your first light brush with WordPress plugins, which can do almost anything to your WordPress install – pushing it towards being a more powerful CMS, an ecommerce platform and so on.