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.

Collections Theme Logo

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.

CollectionsTheme 2

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.

CollectionTheme3

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.

15

15 responses to “Behind The Scenes Of The Collections Theme”

  1. first off, amazing work on this. it’s the first solid use of Post Formats I’ve seen.

    for the next project, I’d love to see something that either handles external data aggregation (i.e. Instagram, Twitter feed, etc) or pulling some admin functions into the front end in a clean way.

  2. I’m a big fan of this theme and would love to learn how backbone.js was integrated. Amazing job.
    For a next project, I’d love to see the powers of backbone taken to the next level with a more community centered site design. WPTavern definitely needs a repaint!

  3. I think this looks to be one of the best design themes I seen in a long time, with the backend development done its amazing. Congratulations The Theme Foundry. I also would like to dig in the code to see how backbone and underscore was used.

    For the next project I think you guys should tackle a corporate theme. Most the ones out there are cookie cutter and plain. With the technology you have leveraged on this theme, your design chops. I think you can break that mold into a thousand pieces.

  4. I agree. More themes that take advantage of backbone and other ajax-driven technologies sounds like something I’d like to see more of as well. At the same time, how difficult is it to extend a theme like this that relies on these front-end technologies versus a more ‘standard page load’ theme?

  5. Collections looks absolutely stunning! Could have easily been a default WordPress theme, if only the timing (post formats / content blocks) was right.

    Sounds very relevant to the big conversation about “Improving the content editing experience (in WordPress)” going on over at Make right now. Would love to see the ThemeFoundry guys come over there and share some experiences and ideas.

    As for the “next theme” suggestion, I’d love to see a Presskit theme, basically ripping off this (unfortunately somewhat stagnant) project:
    http://dopresskit.com/

  6. This is a stunning theme. Truly gorgeous. I’m intrigued by the use of backbone.js to add to its “application”-type feel. I’d love to have a copy that I can tear down and dig into how it all really works. Theme developers could learn a lot by dissecting innovative themes like this.

    +1 on seeing a business-style theme from Theme Foundry. All of their existing themes are extremely creative, and it would be awesome to see them put a new spin on a theme for small businesses.

  7. First off, really awesome work on Collections! I really love seeing other theme providers think outside the box and Collections is definitely a unique take on WordPress post formats.

    What I was especially interested in, was the use of Backbone.js in the theme, as it’s something we’ve been considering using in our own products.

    One thing I am curious about though, which nobody seems to have mentioned, is what measures have been taken to ensure the content / site is accessible without javascript being enabled?

    I took a look at the demo with js turned off and all that’s displayed is the logo and menu (http://d.pr/i/W00D), which seemed a bit odd.

    Surely it would make sense to fall back to the “normal” method of loading the content and links when browsing the theme with javascript disabled?

    PS, I realise that this is a case of the kettle calling the pot black, considering the product demo on our own site doesn’t function properly without javascript being enabled, but we’re working on an updated version which addresses this :P

    Chris

  8. Just loved the theme! I need it! Pleeeease!

    For the next theme, being a developer I guess that it would be cool to have actions and filter hooks that could make me turn the theme into a more flexible CMS platform so I could add my own stuff to be controlled by the user on the admin panel ;)

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.