I released a new version of the Cascade theme with DevPress a few weeks ago, and I thought it would be worth writing about the process.

I learn a few new lessons with every new theme I build. This one was especially interesting because I was able to study the existing codebase, analyze all the choices that had been made by the previous author, and also learn a few new good tricks.

Why Update?

Cascade was originally released over two years and hadn’t received significant updates until now. Part of this was because it was built on a strong base, tested thoroughly before it was released, and incorporated responsive design from the start.

But two years is also a long time in WordPress and technology world. I wanted the theme to take advantage of theme customizer (rather than a custom options panel), use icon fonts rather than static images (for retina screens), and use modern build processes (grunt, sass, script concat/minification, .pot file automation). I also wanted to simplify the theme by removing some of the layouts (more on this later).

How to Update

It’s a difficult decision to make significant updates to a theme. You really have to consider your existing users. Tom McFarlin wrote a great post about “Planned Obsolescence of WordPress Themes“, which I commented on.

Originally I was planning to release a completely new version of the theme and retire the older one, but then I did some research. I use Easy Digital Downloads on DevPress with the Licensing Extension. This allows customers to automatically update the theme when a new version comes out, and it also means I have a list of domains which have automatic updates enabled, which is an invaluable tool.

I looked at every single domain that had a license active for Cascade, and realized most people had not customized the theme significantly and could really benefit from the upgrades. For the handful of folks who might have issues upgrading, I e-mailed them separately and tried to figure out a good solution. Everyone appreciated the heads-up.

Design

I’ve always thought the design for this theme was terrific. Tung Do spent a lot of time on the small details that a lot of theme designers miss. Here’s a couple of my favorite details.

Pagination

New theme developers (especially submissions I see to wordpress.org), tend to ignore pagination or just give it cursory styling. Tung Do really spent some time styling this- and I tried to follow his lead the theme rebuild. Archive pagination and comment pagination (pictured above) both have a numbered view.

The archive pagination is powered by the “loop-pagination” module in Hybrid Core by Justin Tadlock, which any theme can use as drop-in.

Comment pagination is done with this little bit of code:

Menus

Menus are always been the most difficult item for me in WordPress themes. They need to accommodate between 1 and 100 menu items. There’s a ton of individual elements to style: drop downs, hover states, active states, toggles. The design is also likely completely different in a small screen layout.

If you’re interested in how this works for Cascade, take a look at the demo. I also wrote about displaying social icons in menus here.

Lists and Markup

Great themes have always thought about styling for tables, blockquotes, codeblocks, and headers. Designers sometimes forget some of these elements because they’re not in the dummy content they’re working with. If so, make sure to test theme unit tests. In this new version of Cascade I just copied over most of the great styling Tung Do had already done.

Build Tools and Drop-In Libraries

I’ve written about the Grunt build tools I use in this post. Grunt handles a lot of great stuff: .pot file generation for translators, RTL stylesheets, browser prefixing, script concatenation, and versioning (just to name a few).

I’ve also been building my new themes with the Customizer Library, which allows me to quickly define all the options and inject styles where needed.

The previous version of Cascade used a drop-in library to handle page breadcrumbs. Thankfully Justin Tadlock also moved this into a plugin, which I’m suggesting for customers who wish to have breadcrumbs.

Internationalization

I’ve started working with Fx Benard (in France) to help me manage translations. He started a terrific project called WP Translators which does free translation for projects hosted on wordpress.org, which is how we first connected.

Now translations are completely part of the build process. When new strings are added to the code, they get added to the .pot file automatically during the build process. When a new release is ready, I push these up to Transifex using another Grunt process. And when translations in a language are at least 90% complete, they automatically get pulled into the theme.

Since Transifex has translation memory, strings just need to get translated once and they are available across all the themes we have hosted. It’s great to build a new theme and already have it 70% of the translations in other languages already finished because strings are the same.

Dog Fooding

Before I released this new version of Cascade, it was up here on WP Theming for a couple weeks. This helped me spot small issues I might not have noticed when just working through the theme unit tests. I think it’s incredibly helpful to put yourself in the position of the end user and use the theme you make in a few places to see how well it works.

Conclusions

In all, I’m really happy with how the update went. It’s been out for a few weeks now, and no one reported issues with the upgrade. I also learned a ton by learning how Tung Do had originally conceived the theme and built it out.