When I recently updated this site and decided to start keeping a blog, I installed WordPress to run it. WordPress is an is an amazing tool in its power and flexibility, but it falls somewhat into the same trap as a lot of software in that it works really well for beginners and experts, but those of us somewhere in the middle are kind of left in the lurch. It’s not quite as bad about ignoring intermediate users as a lot of software, but there’s still a gap.

The Short Story

Given the choice between taking someone else’s theme and just applying it to my site or developing one from scratch, I decided to do the later. I got in a little over my head, learned more PHP than I wanted to spend time learning, but in the end I’m generally happy with the result. So, what you’re looking at isn’t just an off-the-shelf WordPress theme with a custom header image, but something I built myself.

Mind The Gap

There are a couple of theme frameworks out there that are trying to serve people like me — they abstract a lot of the options that you might want to customize about WordPress in a way that’s more friendly for people without coding skills. The two frameworks that I looked at (and worked with for a while) are K2 and Hybrid. They are both powerful and have a lot of things going for them. They are built on the premise of providing a much more robust base theme than the defaults that come with WordPress, while also providing a way for you to customize further by developing a “child” theme. The child theme inherits everything the framework does unless you override it.

Unfortunately, they suffer from being so robust and comprehensive that if you want to step outside their expectation of things you should be able to customize easily, it’s overwhelming. Not only do you have to learn how WordPress works, you have to learn how the framework works. In (briefly) working with them, I was constantly encountering problems where (a) I didn’t really know the consequences of my actions (was I breaking dependencies that I didn’t know about?) and (b) when I understood what I needed to do to achieve a certain goal, there seemed like a lot of extra work to make it happen. I kept finding that to do what I wanted I would need to modify the framework just a little bit here and a little bit there to get what I wanted. That kind of defeats the purpose of using a framework with a child theme, so I ventured out on my own. (I don’t really mean to disparage these in any way, because they are great, definitely worth checking out, and I probably wouldn’t have been able to develop my own theme so quickly had I not studied these themes).

What I Was After, What I Got

Although my goal isn’t really to release a theme to the public, I created it with the idea in mind that it be easily customized by someone else. I figured that if I did that, it would make my own life easier if I want to change it later. For me that meant:

  • Keeping it lightweight. The more places there are to look to have to change things to your liking, the more daunting it is (and the more likely you’ll miss something). Instead of the hundreds of files that make up K2 and Hybrid, there are 9 files in my theme (not including images). If I want to change something or if something is broken, there aren’t a lot of places to check. Their frameworks are about 1.3 MB and 1.7 MB (including images). My theme is about 170 KB.
  • Keeping it simple. There’s only one custom function in my theme, and it’s only a couple of lines long. Instead of creating a bunch of different templates for different page types, I kept just about everything in the index.php file and used a few conditional statements. This may not be the best coding practice, but I don’t need it to be particularly modular, and this way I can keep track of everything much more easily.
  • Keeping CSS semantic and separated. I broke my CSS into 3 files: a reset.css file (clears out all the default browser styles) a base.css file (building up things like basic typography, spacing, formatting that was stripped out in the reset file) and the theme’s style.css file which basically defines all the custom things you see. And everything is named in a meaningful way, rather than in some crazy shorthand. With just reset.css and base.css in place, the site would look like a web site from 1992, but all the content would be there and everything would work.
  • Putting lots of comments in the code to explain what’s going on. I figure if I don’t touch this for 6 months, I’ll be in trouble if I don’t include good comments.

Unfortunately, there are still some things that I’d like to change that are going to require some heavy lifting on my part. There are a few things that seem to be buried deep in WordPress’s functions that shouldn’t be (text strings and CSS styles). I’ll probably have to learn some more PHP to write functions to override the behavior I want to change, but I don’t think there are too many of these things. There are also a couple of minor CSS hacks to get things working across the 4 browsers I tested (Internet Explorer 7, Safari, Firefox 3 on Mac & PC). If I get to updating some of this, I may release the theme to the public.

A Few Thoughts on How WordPress Could Improve

I imagine that this has been the trend all along as WordPress has been updated over time, but these are some of the main shifts I’d like to see with WordPress:

  • Every bit of what can be displayed should be modularly accessible. I should be able to choose to show very granular bits of information or not rather than sometimes getting the kitchen sink.
  • Text and styles should be completely configurable. Text strings shouldn’t be written into WordPress functions, you should be able to confure them. Most HTML tags and CSS ids or classes shouldn’t be hard coded into WordPress functions, you should be able to use the ids and classes you want.
  • There should be a consistent way to configurable all this stuff. It would be nice to have a web UI to do it all from your WordPress dashboard, but even just having a standard way to call the display of each element, and pass text, HTML or code to display/execute before & after the element would be great. It’s possible that this last bit exists, but I just haven’t figured it out yet. My sense is this is that what I want is only partly there.

As I use it to blog, I’m sure I’ll more to write about WordPress and its UI problems big and small. But for now, long live WordPress!