Thesis 2.0: A First Look

Last week, Thesis 2.0 was released as a premium WordPress Theme Framework. It was the first major update, a total theme re-conception really, in more than four years.

The result is a drag and drop website and theme creator like no other; with the ability to create custom websites in just minutes with absolutely no custom coding.

Thesis 2.0 is comprised by four featured areas; Site Options, Skins, Boxes, and Packages. Each has a distinct function, powerful in its simplicity.

Site Options

As its name suggests, this area controls sitewide options like title tags, meta description and keywords, rss feeds, and head scripts. It also allows you to easily add a favicon image, Google and Bing webmaster site verification, and Google’s Rel Author id which adds your pretty little image next to your articles in web search results.

Thesis 2.0 WP Head Editor

Analytics Tracking

For those who track site analytics through Google you can simply enter your tracking ID – no more lengthy code snippets to cut and paste.

404 Pages

404 Pages can be created quickly from existing WordPress pages, which means they can be editing to display any content you wish, from posts and widgets to custom content like features boxes and sign up forms.

Search Engine Optimization

Like previous versions of Thesis, the 2.0 framework comes with built-in SEO functionality proven by many site owners to be effective, including some of Google’s own developers who run the Thesis framework.

A new addition to the Thesis SEO options includes the ability to add Schema, which is a popular website categorization method currently used by search engines. Any developer will tell you adding schema traits and markup to a website can take time. For most, the meta data is confusing and hard to add, but with Thesis schema can be added with just one click.

Adding Schema Meta is Easy as one click

Schema helps search engines better classify your data and makes it easier for viewers and searchers to find your site.

Skins

Skins are the heart and soul of Thesis 2.0, and to understand them better, it helps to know how other frameworks treat skins – generally in one of two ways:

  1. as a mere copy of an existing theme with css edits to change things like colors, structure and formatting.
  2. as a full-fledged child theme with it’s own unique format, structure, and styling.

Either way, traditional skins have been installed as individual themes through the WordPress theme editor, and often require the main framework to be installed and referenced somewhere on the site.

The problem with that setup is that main framework updates often require a developor’s touch to update custom code in the child, or at least, to update the reference to the newly updated main theme.

Thesis Reinvents the WordPress Skin

The structure of Thesis 2.0 is a departure from the traditional, and a complete reinvention of the “skin” concept.

Rather than having a skin be its own theme installed through WordPress, skins are installed through the Thesis 2.0 skin editor, and comprised of custom templates that control the look and feel of each page of your website.

Skins can be as simple as a one page site, and as complex as your imagine can conceive.

HTML Elements can be added and rearranged with a drag and drop interface

Everything is controlled by the drag and drop editor which makes HTML editing a thing of the past. Elements, called “boxes”, are created on the fly and customized with ease, to quickly change a site’s look and feel with just a few clicks.

Skins can be saved, copied, and exported for use in other Thesis 2.0 powered websites, where they can be installed with the click of a button.

Thesis 2.0 takes advantage of the WordPress template hierarchy by creating a system that makes it amazingly easy to add new page templates as quickly as you could add a new post or page in WordPress itself. The result is the ability to create unlimited page templates with absolutely no custom coding.

You can make your home page look different than your single post page, which looks different than your landing page, which can be different than your store pages, which can be different than…well, you get the point. It is that easy.

Boxes

If skins are the heart and soul of thesis, boxes are the bones – the skeleton that makes up the HTML elements dragged and dropped around in the skin editor.

Every element of your site is contained within a “box,” each with its own options, and, potentially, it’s own ID and custom class. This gives you the ability to add custom css right down the individual HTML element.

Add HTML Boxes on the fly

Boxes are bits of html and php programming that add functionality to Thesis. A box can consist of a single .php file and can be saved and imported through the Thesis Box Importer. This gives you the ability to save your custom bits and move them from site to site with very little (if any) additional coding necessary – a great time saver for developers.

Thesis 2.0 includes 9 standard box types ranging from nav menus to post boxes. You have the ability to create an unlimited amount of custom boxes which extend the functionality and complexity of your site. Think of boxes like Thesis’s own plugin functionality.

Packages

Packages are where Thesis 2.0 stores your site’s CSS.

CSS Package Editor in Thesis 2.0

Packages can be one of 8 standard choices included with thesis, or you can add your own custom packages, which too can be packed up and moved from site to site through the Thesis Package editor screen.

Creating a package is as easy as a few clicks, and custom css can be added to your site with no coding. Depending on the type of package added (menu styling, comments, fonts, columns, etc) the package options will change.

CSS options are editable without needing custom code

To add even more granular css changes, you can use the additional CSS box included in every package.

Add additional css with the custom css editor in packages

This gives you complete control over your site’s css.

Another great feature of the Thesis 2.0 framework is the ability to add custom css variables. Rather than creating custom code and repeating it for dozens of elements in a custom CSS file, thesis allows you to create and reuse css variables throughout your packages.

Creating CSS variables for reuse in Boxes and Packages

This can be further refined using custom classes inside the HTML Box editor, and savvy developers can cut even more time off their designs by planning variables ahead of time.

For instance, rather than adding a css selector for every h2 element on the site that has a custom blue color and a font size of 16px, you can create a single variable with that css, and then assign the variable to the html elements which contain the changes you want to make. On larger, more intricate sites using variables can literally save hours of design time.

Thesis 2.0 First Look Summary

Thesis 2.0 provides something for everyone. Newbies will be able to drag and drop their way to a unique custom WordPress website, and experienced developers can use it to cut hours off client site design time – not to mention make template editing even easier than before.

The Thesis community is also a vibrant one, and with custom boxes, packages, and skins planned for release very soon, Thesis 2.0 will quickly become one of the more popular frameworks on the market.