Designing the Bumblebee Labs Theme

When it comes to this sort of thing, I usually take the lazy way out. There are so many designers vastly better (both technically and visually) than I am out there, spending all day making kick-ass-fabulous wordpress themes, it would just be a shame to not take advantage of them. I’d almost consider it doing them a favor.

Unfortunately, however, you can never find a wordpress theme that fits exactly what you want. The colors are off, or it has the wrong number of columns, or the columns are not on the right side, or it just doesn’t feel personal enough. Often it’s easy enough to go into the style.css file and muck around with the colors, and it’s pretty easy to add an image here or there in the .php, but doing something like moving a column from one side of the content to the other is deceivingly difficult.

I banged my head relentlessly against the keyboard for several hours trying to do so with the choice theme, but to no avail… if I touched the arrangement of the columns, the beautiful liquid css layout would crash into a waterfall of random links and content, making a top-rate mess all over my firefox. I simply couldn’t get the css to hold together.

Why couldn’t I get the css to hold together?

For the same damned reason that css stands for Computing, Satan Style. For some arbitrary reason (like whether you’re coding on a tuesday, or if your great aunt Blanch coughed on your keyboard recently), divs that are supposed to sit side by side drop mischeviously down, so they’re all piled on top of each other like a sausage link that’s just too tired to go on. There often is no explanation for this, and it can be fixed only immediately after you give up.

So, having given up entirely, I was tossed a link from Hang that seemed to have the answer to all my problems – a fluid, three column layout that could be twisted into whatever form I wish. It was the shining white glove I could wear to fix my layout. Unfortunately, when you dip a glove in the mud, the mud doesn’t get glovey, and the css did what it does best.

Time to start over.

I didn’t set out to write a WordPress theme from scratch, but it seemed to be the best solution to get exactly the look and feel I wanted. I know nothing about PHP, and even less about WordPress specific PHP, but by examining several themes and seeing what the data had in common, I could tell what was necessary for WordPress to function, and how it was used.

It actually wasn’t all that difficult, until I tried combining my homebrewed PHP with the css file I already had.

Here’s where it gets ugly…

It broke. All over the place. Leaving little wordpresslings as it went.

I tried to figure out exactly what went wrong by simplifying the theme in increasing amounts. I had included and overwritten all of the Holy Grail’s CSS into my own theme, but noticed how the CSS had split various bits of the code in two different places – my Firebug looked something like this:

Thinking that it was odd and unnecessay, I combined the two bits into a single bit of code:

body {

background: #FFFFFF none repeat scroll 0% 0%;

margin: 0pt;

padding: 0pt;

min-width: 630px;

}

I’m not sure if it was because of that subtle change or because of a typo somewhere, but it simply would not come out the way I wanted it to. So, I did the only sensible thing I could do, and sold my soul – cleared out all the css, and replaced it wholesale with the Holy Grail code. I’ll have to add my own styling later.

There is a plus side to all of this…

You see, now I have a template. The PHP is now about as simple and easy to understand as I could hope for, and the layout is fully functional and working – just waiting for a skin. I can save my template for a rainy day, when I will be able to pull out a beautifully scripted and styled three column wordpress layout, and modify to whatever suits my fancy.

I suggest, if you run a blog and have at least moderate css/graphic design ability, you download the Bumblebee Labs Thievery Theme.

Included, you will find nothing more than a functional, happy WordPress blog stolen shamelessly from the Holy Grail of Three Column layouts itself. I hope it saves many a headache.