July 1, 2020 • Web

The Journalist’s Toolbox (Or: How to rebuild a house from the ground up without getting any dirt on the furniture)

Website: The Journalist’s Toolbox
Client: Mike Reilley
Technologies used: HTML, PHP, CSS, more CSS, even more CSS, but not too much CSS
Contributions: Built a new theme from the ground up (atop Blankslate), didn’t break anything that was already there, scoffed at and deleted the stock TwentyTwenty theme WordPress installed as part of a recent update.
Demo: journaliststoolbox.org

I’ve been tasked with not breaking The Journalist’s Toolbox (est. 1996) since around 2008, and it’s been a pretty low-effort job. I ported it over to our host back then, gave it a pretty light redesign in 2014, ported it from Movable Type to WordPress a couple years later1, and have picked at it a little here and there ever since.

Finally, it was time for something fancier. (It was past time for something fancier, but I digress.)

So just install one of the 10 million premium WordPress themes and call it a day, right? It’s like you don’t know me at all. (And maybe you don’t if this is your first visit, in which case, welcome.) I like WordPress just fine, but I don’t much care for pre-built themes, and in the last few years in particular it seems like themes have kind of lost their damn minds when it comes to bloat and resource gluttony. (Which makes sense, because the entire web has similarly lost its mind, but that doesn’t mean I have to like it or participate in it.)

The bloat-ening of WordPress themes has coincided with my continued education in how to make a theme from scratch that looks classy but is lighter than ever. And so this redesign began like all of my recent WordPress projects have started: with a nearly blank page that lets me do whatever I and/or my client wants regardless of what WordPress actually thinks I’m asking it to do. (Fun fact: the grid of boxes on the front page is actually recognized by WordPress as a dropdown menu and not a front page grid at all. We needed a way for the front page to link to posts, categories, pages and external links in whatever mix and order Mike wanted it to on any given day via simple drag and drop, and using a little code to turn a menu into a not-menu was the most sensible way to do it without resorting to additionally bloaty plugins.)

552 lines of CSS later (1/11.4th the size of WordPress’s built-in stock TwentyTwenty theme, I’ll add just to prove my point and bring this narrative full circle), and here we are — a fairly dramatic redesign that enhances how people interact with the site but doesn’t touch or move or even make prolonged eye contact with the 24 years’ of curated information that makes the Toolbox such a valuable resource to journalists, researchers and anyone in need of trusted sources of any kind for any subject. (Seriously, bookmark it. It’s very useful.)

As a bonus (not a really a bonus, this is very important to me as this short story should have made clear), keeping it light means this version of the site actually loads faster than the one it’s replacing even though that older version of the site had only 10 images (a header graphic, 8 social media icons and a logo) to its name. If your WordPress site is in need of that seemingly unattainable combination, maybe I can help.

1. This was a little dicey, but considering our host endured a three-week downtime2 and the site I was porting from had just mysteriously disappeared4, it wasn’t like it was an issue if the new site had errors that the old one did not.

2. They never explained why our sites were down for that long, but by the end of the three weeks, we’d changed hosts anyway3 so I didn’t care.

3. Don’t use Bluehost.

4. Always back up everything every day. And back up that backup.