Writing a WordPress theme from scratch
I recently completed a relaunch of The Beatles Bible – putting together a theme from scratch and styling the css myself, and I thought I’d write a brief update on my findings.
This isn’t exhaustive, just things I remember as I reworked the site from scratch. It was tremendously rewarding to know that I have a design that’s all my own, rather than a theme that appears on dozens of other websites, even if it involves some hard work and head-scratching. Which brings us on to…
Why design a theme of my own?
Since I started using WordPress in early 2008 I quickly realised the range of styles and designs possible within the CMS framework. I downloaded a few and tweaked them for my purposes, but eventually got fed up with having to unpick someone else’s css or php to make any changes. Also, quite often theme developers would issue updates to their themes, and I didn’t want these to override any custom alterations I’d made. I realised the only way to get the right level of control would be to design and code a theme from scratch, adding only the elements which I needed and ignoring anything else.
I knew I wanted a grid with a wide central content area, plus two sidebars to the right. I also wanted a fixed width, mainly so the banner would snugly fit the content area (which would be harder with a fluid layout). I’m not a graphic designer, though, so had to rely on others’ expertise a little.
I found a two-column grid framework on the 456 Berea Street site. This gave me the basis of what I wanted – a wide sidebar on the right, above which were two narrower sidebars.
Next came the php files for the theme. I’ve only been working with php for little over a year, and always had trouble working out how the various files interacted together. Fortunately, a great tutorial on the WP Designer site talked me through each step.
The tutorial isn’t perfect – at the end of it I found out the archives list was hard-coded into my sidebar, rather than being an optional widget, and there were a couple of other minor tweaks needed, such as enabling threaded comments and changing h1 and h2 tags to optimise for search engines. However, working with the Berea Street framework and applying the changes as I went along, my site began taking shape nicely.
The WP Designer site encourages people to install WordPress locally on a machine. I didn’t do this, as I wanted to see whether everything worked OK in the wild. So I created a sandbox test area on my live site, put a fresh install of WordPress in there, and began uploading the various files.
Most of this work – barring minor tweaks – was done over a two day bank holiday break in which the sun was shining outside and I was indoors fretting over code. It was worth devoting the time in one large chunk, though, as I think if I’d done it bit-by-bit over several days I would have forgotten various points.
Four bits of software were invaluable. Firefox, my browser of choice. Secondly, the Firebug browser extension, which is a brilliant add-on for debugging css (the person(s) who wrote it deserve a knighthood for services to web development). The third was YummyFTP, which after trialling various FTP programs for the Mac emerged as a clear winner. And finally TextWrangler is my text editor of choice. Later on I fired up Photoshop and created some graphics, but most of the site was done with just those four bits of software.