Thesis is a premium killer theme for WordPress that takes the publishing platform a step into the future. When it became popular 7 years ago in its 1.x version it was then state of art making theme customizations a breeze. At that time deep theme customizations without coding were ground braking. Nowadays, theme customizations is a standard thing and built into WordPress itself. However, these common customization options such as font, color and overall layout is now becoming a problem because it usually don’t solve the need to go mobile, tablets and other cool styling effects available in modern browsers that supports transitions and even vectorized graphic.

Thesis was just released in a new version 2.0 (2012) having a completely new revolutionary way of customizing user interface solving all these issues in an elegant way. In fact it blows away all competition, leaving them behind in the dust, it is actually quite an amazing piece of software – speaking as a web developer myself. There are just a few commercial theme frameworks that can qualify for the top positions, such as Ultimatum, Genesis Framework, Headway etc. however, thesis leaves them behind in the customization perspective and I will tell you why.

Whom thesis 2.0 is for

The fact that thesis is a complete framework that adapts to the structure of HTML and CSS together with the WordPress infrastructure it is not for the fainted hearted kind of people. If you are new to WordPress, HTML, CSS or the web thesis 2.0 is not the right choice, in fact it can be quite confusing. That being said, thesis suits serious web developers and web designers very well, but you need to invest a lot of time to learn the tool. In the end, your options are endless. If you as a designer know about the web technologies behind, you will be able to be very creative using thesis 2.0 because there are no limits by todays standard.

Thesis is a perfect fit for web professionals in the CMS business world, because it will deliver the best quality and design together with a future safe infrastructure. Because thesis 2.0 follow the HTML and CSS way of coding it can be hard to use its full potential if you are not into this world of stylesheets and HTML elements. In that case I would more recommend Headway or business themes that already have the design in mind.

So, why is it so fantastic

It is a graphical interface to quickly prototype and design the layout without any coding or template modifications. This means that any updates to themes and other WordPress future upgrades less prone to break any previous work. Specifically, the framework has separated HTML from CSS but also using WordPress infrastructure, keeping pages, messages, front page, archives divided into each skin. This is all wonderful because you will follow the structure of how HTML, CSS and WordPress works internally, making the design more slick, effective and functional. The result is a SEO optimized site, super performant server, compatibility with other WordPress plugins and infrastructure and many more positive things.

Just to compare, all other commercial themes that is supposed to be the best, only have a stylish front, as soon as you want any customizations, you need to dissekt the whole theme making updates more or less impossible. Most commercial themes do not think about making WordPress effective, they add on several extra JavaScript, CSS and make unnecessary access to DB tables not optimized for the task. This is why thesis shines above all this, you get the best of the best and still be able to do any customization you want.

For the moment, I consider Thesis 2.0 the best commercial theme available, it is even several years ahead of the WordPress platform itself.

How you design in thesis 2.0

Basically you start with a standard skin that includes WordPress basic functionality such as views for pages, archives, messages. You then dive into the skin designer (that work with visual boxes which is HTML objects) and re-arrange, include or remove HTML elements as needed. You then go to the CSS designer and include stylings for each box using packages. That’s it, everything is done without touching any code at all.

Thesis 2.0 is perfect for RWD (responsive web design) since it easy to style boxes with media queries, however some custom CSS have to be used in the style packages to make it work well. In fact I tend to use the custom CSS of each package since it is easier to work with than the point and click interface to CSS styles. You can use both in any way you want, the styles will be compiled upon save to a single compact stylesheet for the whole skin/theme automagically.

Assets are compiled and contained inside the skin/theme

To create a slim and performant theme you must have full control of its assets and this is where thesis 2.0 shines bright, all images that belongs to the skin/theme will be saved inside the skin assets area on disc. It has its own uploader to store the skin images in the right place and to help the designer use the correct url for the stylings, this happens without moving any files or modifying any code in the theme at all.

Thesis 2.0 also includes a package compiler (CSS compiler) that automagically reloads a preview in a browser canvas so that you can immediately see any modifications without reloading any browser window. This canvas reloading works in the same way when you save modifications of boxes(HTML structures) as well. I remember I was amazed by this little feature the first time I noticed it, so I immediately understood that thesis was really built by someone that understands the way the design process works.

Backup, restore and re-use skins

Included are features to backup all the skin data (theme files, boxes, packages etc) in a simple point and click. It is so dead simple and quick to use that it can be used to store revisions during work. As soon as you do something wrong, you can restore a previous known good revision with just a click. This is also the feature used to re-use data from other skins. Skins can be exported and imported as files with just a click on a button.

The import/export is feature rich and it is easy to filter out any specific parts to be exported or imported, such as only the CSS packages or only the HTML boxes for example.

Themes (skins) for the busiest site

I’ve tried thesis 2.0 in the hardest conditions, it runs in one of my sites having 500k+ visits/month on a single server without it being resource hungry at all. I have combined all JS and CSS files as well as all style images in one sprite running on nginx, it was easy to create such an effective theme using thesis 2.0 using basic web technologies. In fact it is so effective that caching of WordPress content was not required. However, this kind effectiveness is dependent upon the design and structure of the customized skin used – but with thesis this is all possible.

Gotchas

Even though I have said Thesis 2.0 is great, it have some really annoying implementations that will hopefully be fixed in the coming future updates. First of all, it have some naming conventions that is different from what the normal web community are used to and they are:

Skins = custom themes or child themes
Boxes = HTML element structures and functionality such as DIV (containers), Widgets, Menu, Logo, Text etc
Packages = CSS styling configuration of any WordPress object or HTML element

A more self explanatory name of these would be (suggested by me):

Theme skins (It would more describe that it holds the whole design, both HTML and CSS in this skin)
HTML structure boxes (To describe that boxes are part of the theme/skin defined structure)
Style packages (Indicate that packages contains one or more styling instructions for the theme/skin)

There are other inconsistencies that makes it confusing to work with for example the fields to name HTML element classes, sometimes you must enter the class with the . in front and sometimes it is without it. This makes it difficult because you end up testing and every time a style is not applied you know you have to reverse the naming. When they fix this it will speed up the design process considerably.

Thesis 2.0 framework is great to customize pages, but in real life you also need to replicate a container configuration in the skin designer to another page, when this happens you have to redo every structure for the other page and so on. This is very time consuming, so I am really looking forward to the copy and paste feature between pages. This is actually so bad that it could be a deal breaker for business design people who make their living off of selling designs, because they will profit more with other frameworks that already have easy re-use functionality.

Talking about re-use, a big missing feature is also the ability to easily create Boxes and Packages yourself. It can be done, but you need to dive into PHP-programming which is against the basic idea of thesis 2.0 – to design without being a programmer. I am simply missing the export button on the relevant elements in skin designer and CSS panel, this should have been included in the first place.

Conclusions

Thesis 2.0 is a ground braking step for both WordPress and professional web designers because it clearly separates code from design at the same time it maintains the best compatibility with WordPress, web design and other plugins.

I have worked with the WordPress platform a long time and also the thesis theme from the beginning and also with a lot of other themes in consultant roles. I have used it more in a development way of helping business get their designs out. I have also a lot of experience with many other business themes for WordPress such as Elegant Themes. My findings in this article is based on my own experience working with thesis 2.0 together with other web designers in the last 4 months.

P.S. I previously posted in Swedish, but I will now continue posting in english for the broader audience.