How I Created a New WordPress Theme in 5 Hours
Last month I found myself with my back against the wall: My theme was falling apart.
In June of 2011 I had switched my site to the Headway Theme Framework, version 2.X. The changeover, initially, went very well. The theme was wonderful on the test site and, despite a hiccup or two in transferring it to the new main site, things were up and running quickly.
But problems slowly began to arise. The theme would occasionally have errors where the settings would change or elements would be added, causing sections of my pages to be repeated many times over. Most of the time the problems were minor and easily fixed, but they were annoying. However, over time the problems began to escalate.
After setting up the theme, I was at a major plagiarism conference in the UK when my site broke completely and became unreadable. The smaller errors started to become more common and it began to feel as if I was doing patch jobs on the theme weekly or more regularly.
I tried addressing the issue with both my host and with Headway’s support but none of the changes, including increasing the memory in my VPS, seemed to help. The people at Headway encouraged me to upgrade to the 3.X branch, saying it was much more stable and resource-friendly. However, there’s no upgrade path to go from 2.X to 3.X, meaning that doing so would require starting from scratch. In my mind, I didn’t have the time to set up a new theme and the patches, while annoying, were not time-consuming.
But then things went from bad to worse. In one day the theme went down three times and, the last time, temporarily took the entire database with you. Though I have good backups of my database, nothing causes a moment of panic quite like realizing that 8 years of hard work may have just been erased.
Fortunately it wasn’t, but with errors now as frequent as coffee breaks, I knew something had to be done quickly. So, that evening, I set out on one of my most ambitious WordPress-related tasks, creating an entire new theme in one night.
Picking My Battles
Sensing that there might be a much more serious collapse on the horizon, the most important thing was to get my site stable. Unfortunately, that meant making some sacrifices.
Specifically, there were three points I had to surrender on before I started:
- Using Headyway 3: Though my experience with Headway 2 was definitely not the best and I certainly wouldn’t be opposed to using a new theme, I knew the theme framework well and Headway is designed for speedy development above all else. If I was going to do it in one night, I couldn’t take the time to learn something new.
- Duplication, Not Reinvention: While I could tweak my theme and change a few things around, I couldn’t reinvent the wheel either. By trying to copy what I had, I was sticking with a look that seems to be working for me and avoiding a lot of time-consuming testing.
- Complexity: My original theme had many nuanced elements that could not be easily replicated with Headway 3. Rather than getting bogged down in minutia, it was better to find easier ways to get the features working and then add the polish later.
With the limitations in mind, I ended up with the very unambitious goal of recreating my existing site in Headway 3, but with the very ambitious time frame of that evening.
To start the process, I installed Theme Test Drive so that I could work on the new theme while visitors would still visit the old. With two computers side-by-side, I left myself logged out of one so that I could feed myself information from my existing site and plug it into the new theme.
From there, I knew I had to make three separate layouts for the theme to work:
- Home Page Layout: The home page of my site.
- Single Page Layout: The page for all posts and all pages.
- Archive Layout: The page for tags, authors and all other layouts that list multiple posts.
Fortunately, Headway makes it very easy to get started with a new theme as you actually draw layout in a grid. I quickly sketched out the home page layout, mimicking closely my existing website but adding about 100px to the width. After setting up each of the sections of the layout, within about 30 minutes I had a pretty good replication of the home page of my site with a few problems.
First, the way Headway 3 handles excerpts is much more limited than Headway 2. I could not recreate the two-column look easily with Headway 3. Second, my slider would need adjustment to fit to the wider site. Everything else, however, translated pretty well other than styling tweaks.
I set about trying to fix the excerpt problem and realized that the only practical solution, short of coding it myself, was to pick up the paid Excerpts+ leaf. While it’s a great plugin and a nice addition, it seemed a bit like building a sandcastle with a bulldozer.
Though it started out as a reluctant purchase, it ended up working well as I was able to get the excerpts I wanted quickly.
From there, I set my sights on the other pages and followed a similar pattern. However, there I was able to start with the home page layout and just eliminate and add what was needed. Pretty quickly I had all three pages working, though almost none of the styling was done and there were many elements to add.
This was where the two computers came in handy. On the non-logged in machine I looked up the CSS elements I had and recreated them one by one in the new template. Piece by piece, the new template came together.
Now, after just a few hours, the new theme looked almost identical to the old but the devil was in the details.
There were two problems still preventing me from going live. One was that my slider still did not look right and the second was that the search function wasn’t in the correct place.
Unfortunately, neither of these problems were going to be crackable that night. The slider I use would not let me adjust the width of the right hand side. Though there was an option for it, the highlight (which displays when the post is in the main window) would not update with it, making it look broken. Though I felt it would look best with the right-hand buttons extended at least some, I had to put all of the additional width into the main image.
The search box, previously, was a part of the navigation bar but the hooks feature that made that possible in Headway 2 is not available in Headway three and workarounds resulted in ugly results. I decided to just move the search bar to the top of the page and be done with it.
With the help of my wife, we began to test the site, loading up a variety of pages in the new theme and fixing any errors we saw. Fortunately, there wasn’t much to address but we did notice some minor CSS bugs, such as some links not showing up red and linked subheads displaying oddly.
When it was ready, about 5 hours later, I pushed the new theme live and asked others via Twitter to let me know if they saw any issues. No further problems crept up. Though I noticed and squashed a few other minor bugs over the next few days, for the most part, the theme has held up well.
The Epilogue So far
It’s now been about a month since I did that frantic bit of development. The new theme has held up well and few people even noticed the change (or noticed it enough to mention it). The new theme has also not had any problems and, bit by bit, I’ve been adding back in some of the spit and polish of the original theme.
I’m honestly not sure how long I’m going to keep it though. Given the problems I had with Headway 2 and the franticness that went into this more-or-less forced upgrade, I’d like to switch to a different framework when it comes time to do a full overhaul.
In the meantime though, Headway 3 seems to be working well enough. There have been no issues that have caused the theme to break, even when other server issues arose, and the theme even took a major traffic spike on the chin without an issue.
The main thing, right now, is that the danger has passed and I can now take my time deciding what my next move should be.
In the end, my only real regret is that I didn’t take this action sooner. I held out for an upgrade path between Headway 2.X and 3.X while I found myself patching my site regularly. It was a stupid decision.
If I had only done this a year ago, I would have saved myself a lot of headache and panic.