Behind The Scenes Of The Collections Theme

The Theme Foundry recently released a brand new commercial theme into the market called Collections. Collections is a beautiful theme that puts all of the focus on the content. I’m used to seeing themes with a left or right sidebar with widgets in the footer but this theme doesn’t have those. This theme artfully showcases what’s possible with using Post Formats. I reached out to The Theme Foundry to see if they could answer a few questions regarding how this theme was conceptualized and built.

Who came up with the initial concept for Collections?

Drew: Believe it or not, we’ve been working on this theme on and off for two years. Back in 2011, when I first saw the iCloud website, I wanted to build a theme with big bold elements to represent post formats. I also wanted it to have that real-time “application like” feel. I felt combining these two elements would make for a really special theme.

Around that time, I reached out to Veerle Pieters. I knew she would be an awesome fit for this project. She’s an amazing designer with world-class illustration skills. Her unique talent and vision really brought this theme to life.

We actually started in quite a different direction initially. You can see some of the concepts in the project Veerle posted over on Dribbble. We eventually scrapped the lighter vintage look and went with something darker and bolder. We just didn’t feel the vintage look was taking it far enough. Scott was instrumental in working with Veerle on the new darker concept, helping her polish the concept into some final mockups.

Can you provide more background information into the use of BackboneJS to power the theme versus more traditional methods?

Zack: From the outset, the goal was to give Collections a “desktop” application feel. We wanted fast and smooth page transitions. Using traditional techniques of building pages on the server and pushing them to the browser is inherently slow. Backbone.js allows you to make a request for JSON data to the server, then render parts of the page using that data along with Javascript templates. This avoids the overhead of loading all of a page’s assets (e.g., JavaScript files, CSS files, images, etc.), re-painting the page with CSS, and loading boilerplate HTML. You get a nice speed bump with this process.

Backbone is not the only library or framework that provides this functionality. There are a host of other options out there, including PJAX, Ember.js, and AngularJS. So why did we choose Backbone? First of all, Backbone is really flexible. It is a library that lacks a strong opinion. Actually building a theme like this requires mapping a server side application onto a client side application, which we knew would present a number of issues. We wanted a library that would be flexible enough to handle the WordPress requirement, and fortunately, Backbone provided that. Second, because it was included with WordPress 3.5, it is likely that Backbone will become the de facto standard for JavaScript apps within WordPress. By using Backbone, we will benefit from future improvements pushed by WordPress core, as well as benefit from the community that springs up around the technology. In essence, this means that we will be able to build better products for our customers.

From the outside looking in, there are no left or right sidebars. Just content with comments. Was that the whole point of this theme or was that a conscious decision not to include those?

Scott: Widgets were never in the plans for this theme. Collections is built for sharing and browsing. It had to be visually stunning and unique. It had to feel like an application, not a website. Making a strong decision like this allowed us to focus on achieving that goal.

Did the decision to yank out the Post Format UI have any consequences on the design of this theme?

Scott: It was a big deal for us when the Post Format UI was pulled out of core. We were timing this theme to take advantage of the new UI, and believed it would be a great example of Post Formats. The sudden lack of a Post Format UI also made things much more difficult from a development standpoint.

With that being said, it didn’t impact or change the design at all. We had a strong vision and we’re determined to make it work with WordPress.

Are you surprised at all by the large positive reaction to the design of this theme?

Drew: Every time we reviewed Collections as a team, we were struck by it, even after working on it for a long time. If you’ve been building themes for awhile, you know this sort of thing is rare. You’re usually sick of looking at a theme by the time you release it. Collections really felt special, but you never know how something will be received. We’re glad other people in the community feel the same way.

One of the features of this theme is special media handling. What’s so special about it?

Zack: Veerle designed Collections to highlight the content of a post format. Instead of lumping all of the content together, Collections aims to highlight the special post format content (e.g., a video in a video post). To do this, we needed to extract the special post format content from the actual content. We used some of the functions that were removed from WordPress core, and added our own techniques for grabbing the content. These techniques make it easier to display the content in a beautiful way (see the audio post format). We also leveraged the new audio ID3 tag support included in WordPress 3.6. If you upload an audio file with artist, song, and cover image information, that is used to display the audio. We are really excited about this!

Anything you can hint us to what’s coming down the pike?

Drew: I can’t share anything specific, but we’re really excited about the Backbone stuff we explored with this theme. We’d like to continue down that path and see how we can start using these approaches in all our new themes.

Other than that, we’re going to stick to our knitting. We’re focused on taking the time and effort to design and build truly premium quality WordPress themes. We’ve always valued quality over quantity, and that isn’t changing anytime soon.

Want A Copy Of Collections?

Special thanks to The Theme Foundry team for answering my questions. If you would like a chance at getting a copy of Collections without technical support, just the theme, leave a comment below with what you would like to see these folks tackle with their next WordPress theme. The winner will be chosen at random in a few days.