How I customized the Sandbox theme

Two meta blog posts in a row is a sure sign of a blog in peril, but I’d thought I’d give Alastair a nod regarding customizing the Sandbox theme.

In brief

  • Customize the Sandbox theme via a child theme.
  • Use theme switcher if you want to modify and preview your theme in situ without impacting what the rest of the world sees.
    • I couldn’t get Theme Switcher to work with child themes.
    • So I made changes directly to a full Sandbox theme, then turned those diffs into a child theme.
    • I had to turn off WP Super Cache.

Child themes

My last attempt at a custom theme resulted in a great deal of bit rot, so when looking for a new theme I really shied away from anything that required any maintenance effort on my part. I thought that meant I had to find a theme that meet all my functional and visual requirements at once — seemingly a tall order.

Until I discovered child themes.

Great googamooga — child themes for the win. I recommend reading through Demetris’ How to make a “child theme” for WordPress post for all the gory details, but my resulting wp-content/themes/ directory looks like this:

  • themes/sandbox/ the standard Sandbox theme, unmodified. (Sandbox 1.6 as of this post.)
  • themes/sandbox-madbean/ my child theme.
  • themes/sandbox-madbean/style.css (copy as of this post).
  • themes/sandbox-madbean/functions.php an override to add my own footer (copy as of this post).

Some particulars:

  • I used display:none to hide sections I didn’t want. In the past this is what would have prompted me to make a full custom theme. But I can live with just hiding the divs.
  • I hid the default footer, and used an add_action() in functions.php to add my own footer text.

Theme Switcher Reloaded

Demetris has another excellent post An easy style-switcher for WordPress on using Theme Switcher Reloaded. After disabling WP Super Cache, Theme Switcher Reloaded allows you to override the theme used in a session-sticky manner.

However, I couldn’t get it to work with a child theme. So I developed my theme in a copy of Sandbox, then converted that diff to a child theme.

Other Wordpress plugins

I use:

  • WP Super Cache. A nifty plugin that lazily caches your site so that Apache can serve it as static HTML.
  • Akismet comment spam plugin. Just awesome. As it says: Akismet has caught 359,483 spam for you since you first installed it.
  • Markdown syntax plugin.
  • Wordpress Automatic Upgrade makes upgrading to a new version of Wordpress easy. Apparently this will be a built-in function of Wordpress 2.7. This plugin obsoletes my previous method of easy upgrades.

Updates and Updates

In the absence of regular blogging, I present to you this series of random updates. We will then return you to your regularly scheduled silence. Do not adjust your TV.

Update: new site theme

madbean.com has dutifully been wearing the same theme I whipped up when I originally installed WordPress in 2005. It had really started to show its age, so I decided it was time for a cleanup.

WordPress themes serve two (related) functions: templates for turning data into HTML, and visual styling (CSS). While I wanted to improve the visual styling, my main pain-point was the HTML generation: my theme was a copy of a very old example theme, and couldn’t support any of the new fancy WordPress features like Widgets. I went shopping for a new theme, but I couldn’t find anything that really hit my two requirements:

  • Visually clean and simple, and with a CSS structure that allows some simple customization.
  • That it have a fluid, non-fixed-width layout. Fixed width is popular, but it is not what I want. Some of my posts are wide with code-samples, and if readers re-size their browser window, I want that to have an impact on the page.

I almost gave up with shopper fatigue, but then I discovered Sandbox. It supports all the fancy WordPress features, outputs richly structured HTML (lots of orthogonal CSS classes), and doesn’t override any of the Browser’s default visual style — that is up to you.

So now we have what you see today (which is not perhaps what you might be seeing in the future). Here are screenshots of the three main themes madbean.com has worn over time:

2008: Up to 2008

2005: Up to 2005

2004: Up to 2004

2003: in the beginning

Update: offspring

Did you know I have a new baby son Benjamin? Now three months old, he joins Joshua (nearly four) as one of my main time sinks (which, truth be told, I don’t mind so much).

Update: Wiki4k

I recently got my nerd game on and wiped up Wiki4k. This is a fully featured Wiki (with embedded HTTP server) delivered in a 4KB jar file.

Update: new abode

Having moved to Sydney then spending 12 months renting, we bought a nice little apartment withing walking distance of the city. The building has some very nice views of the harbour, but we are on the ground floor (sacrificing views for a large outdoor area).

So very 1337

Following the previous two, we have yet another moment of project-size zen

    [javac] Compiling 1337 source files to /Users/mquail/work/crucible/trunk/output/classes

That’s right, we are now officially so very 1337!!1!

Josh In Space

My three year old — I mean three and a half year old — son Joshua loves everything spacey. In fact, one of his favorite cardboard boxes is the cardboard box we turned into a rocket ship.

On the weekend we took that rocket out to the local cosmodrome for a test run. The following is the result:


If, like Nick, you think I left poor little Joshy in the middle of a big car park, rest assured that the whole shot is a green screen effect. He never left the safety of our kitchen and Final Cut Express’ Chroma Key filter:

The green screen setup turned out to be reasonably simple: one king-size green bed sheet and a 500W work-light from the local hardware store. What took the longest (about 3 hours) was the motion tracking — making sure it looked like the rocket ship was sitting still on the ground while the hand-held camera jumped about. I started out reasonably fussy with the motion tracking, but got quite sloppy at the end (not that you can tell thanks to the soft-focus that is Youtube). Next time I’ll either try out some of the motion-tracking plugins you can buy, or just use a tripod.

JavaOne, speaking, meetup

It is JavaOne time again, and I arrived in San Francisco this morning. I’m finally getting used to the 13 hour flight from Sydney to SF. I don’t know if that is a good thing.

It is going to be a busy year this year. Some highlights below. If you are in San Francisco note that the Lightning Talks and Javabloggers meetup are tomorrow.

Community One (Monday)

We are running a Lightning Talk session at Community One (12noon I think). I’m one of the speakers, my title is “You suck at webapps” (or will be if I can finish it between now and then). It should be fun. Be there, or … be one of the less square people in SF at the moment.

Javabloggers meetup (Monday night)

Atlassian is sponsoring the Javabloggers meetup at Thirsty Bear downtown San Francisco after CommunityOne. Free beer from 7:30pm proudly sponsored by Atlassian.

Pimp Your Build (Thursday TS-5596)

Conor and I are speaking at JavaOne on Thursday 4:10pm. “Pimp My Build: 10 Ways to Make Your Build Rock”. Come along, you’ll learn a little, cry a little, and come away feeling full of hope.

Atlassian Booth (Pavillion)

I’ll be at the Atlassian booth, come say hello, watch a demo and get an awesome t-shirt.

Escape velocity is cool

Check out this sequence of images of a NASA shuttle being prepared for a mission. Space is still cool. (Via boing boing.)

Got a Jolt!

FishEye and Clover won Jolt awards this year! FishEye in the “Change and Configuration Management” category and Clover in the “Testing Tools” category.

They are “the Oscars of our industry” which — for better or for worse — is about right. But I still I have a fondness for the Jolt awards. The first time I saw the awards in Dr Dobbs Journal, I remember thinking how nice it was that this caffeinated beverage company targets us sleep-deprived code monkeys, and gets us enough to award us for our deeds. And fondness for the Jolt awards certainly has something to do with my fondness for Dr Dobbs Journal.

I’ve poured a lot of code into FishEye over the years. And we are still working quite hard at improving it, so it is sometimes hard to keep at the top of the stack the fact that a lot of people use it and think it is awesome. When non-nerds ask me what I do I give a standard response of “I develop tools for other software developers”, which most people seem to grok reasonably easily. This response took me a few years to refine and means such lines of conversation quickly get to the point where a change of subject is needed (to the relief of both parties). Conversations with other nerds run a little different. We can either be rather evasive, or overly detailed — seeing a fellow nerd’s face gloss over is a bad sign. It is a balancing act that I don’t always get right. But now, if someone’s curiosity matches my current grandiosity, I might just say:

I’ve won a Jolt.

From yay to nay in 16 minutes

Via the teaparty:

10:49:42 PM spud: it’s finally being pooped out http://paulgraham.com/arc0.html
10:52:58 PM michael: @spud: gentlemen, start your parentheses!
10:59:10 PM spud: “Arc only supports Ascii. I realize that supporting only Ascii is uninternational to a point that’s almost offensive … But the kind of people who would be offended by that wouldn’t like Arc anyway.” Well, now I don’t like it… shesh!
11:00:23 PM adrian: Ewwww.
11:00:37 PM conor: too full of himself
11:00:49 PM spud: that’s paul g all over
11:01:11 PM spud: I like the direction erlang went, it doesn’t have a char type, just uses lists of ints
11:01:17 PM conor: probably only 7bit ASCII
11:01:27 PM * adrian likes the name Erlang.
11:01:39 PM conor: Having done traffic engineering, I find it difficult to use a language called Erlang
11:01:48 PM spud: ?
11:02:10 PM adrian: Erlang is the unit of measurement of telecommunications traffic.
11:03:28 PM adrian: 1 erlang = 100% occupancy
11:02:57 PM spud: wow didn’t know that
11:03:07 PM michael: so it’s for stupid mono-lingual programmers writing software for other stupid mono-lingual programmers without funny accents in their names? please!
11:03:57 PM spud: I’ll wait for Erlang 2.0 then
11:04:02 PM peter: Riley (read any 2 yearold) = 2 erlang
11:04:09 PM conor: I’m a .5 Erlang developer
11:04:11 PM spud: @peter lol
11:05:49 PM spud: meh fuck lisp
11:06:18 PM spud: that took 16 mins

JavaPolis 07

So I’m off to JavaPolis 07. If you — my trusted readers — are going to be there, drop me a line or pop in to the Atlassian booth and say hello.

How I manage my Wordpress

Apparently, Wordpress is famous for its 5 minute install procedure, and claims upgrading Wordpress is even easiier. And to be fair, it is a reasonably straightforward three (four?) steps:

  • Step 0: Before You Get Started: Backup and deactivate plugins.
  • Step 1: Replace WordPress files: Extract the new tarball over your existing installation. With special notes about what files you need to be careful to preserve.
  • Step 2: Upgrade your installation: Hit your wp-admin/upgrade.php URL, which nicely upgrades your DB.
  • Step 3: Do something nice for yourself.

My problem is I’m always, always recalcitrant in upgrading Wordpress, because I cannot help but shirk at Step 1. Have I preserved the correct files (I have a whole lot of custom static content that sits alongside Wordpress)? Did I make any changes anywhere that I need to keep (I once change a core Wordpress file to work around a bug)? How do I even tell if I’ve accidentally overwritten the wrong file? And at about this stage it gets thrown into the too-hard basket, to be retried next weekend.

But not anymore!

Thanks to funionfs I no longer have first-step fear. And while some of you may think that fiddling with /etc/fstab and yum is a level of complexity well beyond Step 1, I can honestly say that this is what I consider an elegant solution.

funionfs

funionfs is a union filesystem, and sits on top of FUSE (Filesystems in Userspace).

A union filesystem is something I’ve pondered the existence of before (and trust Ivan to know exactly what I wanted). They allow you to fold up a set of separate directory trees and have them appear as one. One of the directories is usually read-write (with copy-on-write), while the others are read-only.

I recently moved madbean.com to a new FC8 box, and low and behold — sudo yum install funionfs just worked!

What’s in my docroot?

I have a reasonable chunk of static content (images, flash animations, software archives, movie downloads, etc) that I keep in a Subversion repository and deploy to this website via rsync. This content existed before I started using Wordpress, and will exist if I ever stop using Wordpress, so it is not appropriate content for Wordpress to own.

I have Wordpress, which is a whole bunch of .php and what-not.

I have my all my files that sit on top of Wordpress. My wp-config.php config file, the .htaccess file that Wordpress generates so my URLs look cool, some plugins and my theme. It is these files that cause my Step 1 fears. (And in fact, these fears prevent me from making some much needed changes to my theme, too).

All these files, with their different sources and different life-cycles used to be clumped into the one scary directory.

What’s where now?

Now, I have three different directories:

  • /home/matt/madbean.com/static: My rsync-ed static content.
  • /home/matt/madbean.com/wordpress-2.1-orig: An extracted wordpress-2.1.tar.gz with no modifications.
  • /home/matt/madbean.com/wp_data: my Wordpress config, plugins, themes, etc.
  • /home/matt/madbean.com/wordpress_all: An empty directory.

After a bit of fiddling with funionfs options, I settled on a mount like this:

sudo funionfs -o dirs=\
/home/matt/madbean.com/wordpress-2.1-orig=RO:\
/home/matt/madbean.com/static=RO:\
/home/matt/madbean.com/wp_data=RW:\
 NONE /home/matt/madbean.com/wordpress_all

After running that, wordpress_all contains exactly what Wordpress wants to see: a big mishmash. Any writes Wordpress makes (e.g. to configuration or .htaccess) get written through to wp_data. Each time I rsync my static content to static it is automatically visible in wordpress_all. And as you will see below, upgrading is a scream.

To ensure this union mount exists next time the box reboots, I converted the above funionfs instruction into an /etc/fstab entry:

funionfs#/home/matt/madbean.com/wp_data /home/matt/madbean.com/wordpress_all fuse rw,nosuid,nodev,allow_other,dirs=/home/matt/madbean.com/wordpress-2.3.1=RO:/home/matt/madbean.com/static=RO 0 0

Upgrading

Having set that up, it was now time to finally upgrade from Wordpress 2.1. This is what it looked like:

$ cd ~/madbean.com
$ wget http://wordpress.org/wordpress-2.3.1.tar.gz
$ tar fvxz wordpress-2.3.1.tar.gz 
$ mv wordpress wordpress-2.3.1
$ sudo vi /etc/fstab
$ # change the line to refer to wordpress-2.3.1 instead of wordpress-2.1
$ sudo umount /home/matt/madbean.com/wordpress_all
$ sudo mount funionfs#/home/matt/madbean.com/wp_data
$ sudo /etc/init.d/httpd graceful   # for good measure
$ # hit upgrade.pgp in my browser

Do you know how happy that made me?

Next steps

I’m thinking of making the static and wp_data directories Subversion workspaces (checked out directories). I can then version control my Wordpress config. And by being able to remotely edit my theme and check it in (and check it out on a test Wordpress server) I’m finally likely to make some changes.