I like the basic design of TwentyTen (the WordPress default), but I didn’t like the stock header choices. After some time thinking about it, I decided that there should be something dynamic up there. Dynamic is more invasive than just an image swap, and thus some theme customization is required.

I didn’t want to deal with a completely custom theme, nor with being able to update WordPress if I hacked on TwentyTen directly. A bit of Google querying turned up the idea of Child Themes. WordPress allows you to make a new theme that starts by inheriting from an existing one (see http://codex.wordpress.org/Child_Themes).

So, I made the directory for my new theme, set it to inherit from TwentyTen, then started digging around for how to control the header. The header is pretty tied to just supplying an image referred to by the database (with all sorts of logic for changing the image based on the post/page being viewed), with no hooks for writing your own header HTML code, so I just copied the entire header.php, and whacked out the image.

Now, the question is what to use for the new banner. I ended up deciding to use Processing.js for the banner. This has the advantage of being fairly easy to program. The downside is that it uses the canvas element, and so some web browsers won’t be supported now, and it probably won’t run as fast as limiting myself to div/img sprites would. However, on the upside, I don’t have to reconsider the choice every time or limit myself only to simple sprites.

My goal is to periodically change the banner now. The first program running up there is taken from the header of the Processing.js web site. I changed the canvas size to match WordPress header sizes, and I made some minor graphical changes. The original source code is here. My modified source code is here. At some point, I’m going to move the header above the Processing.js app into the Processing.js app to save some space, but I haven’t gotten there yet.

At this point, I hope to periodically (maybe monthly) write new banners to go up there.