The Thesis 2.0 Framework for WordPress – A First Look

Early August, I posted a review on the Thesis Theme. The version examined at the time was 1.8.5. Just to recall, my final thoughts at the time were: 1) impressed; 2) also a little anxious for Thesis 2.0, since the documentation implies that users of Thesis 2.0 will have to work with PHP classes.

October 2^nd, Thesis 2.0 came available – finally. However, people looking out for an update of Thesis 1.8.5 did not get what they were waiting for. Thesis 2.0 is not an update to 1.8.5. Thesis 2.0 is a completely rewrite – from ground-up.

Writing a new theme framework has its advantages of course. The author – Chris Pearson in this case – does not have to bother about the legacy of Thesis 1.x. That opens opportunities.

The down side is that there is currently no easy migration path. Premium child themes for 1.x will not work with Thesis 2.0. Any customization for 1.x versions, will probably not work with Thesis 2.0. So back to the drawing board?

That is probably why – for existing customers – Thesis 1.8.5 is and will be available next to Thesis 2.0. Thesis 1.x will probably be phased out over time, but for the time being, existing users of Thesis will be able to use both versions next to each other, and gain some time to develop a strategy concerning child themes and customizations.

Getting Ready

Installing Thesis has become easier with 2.0. Previously, you had to upload Thesis over FTP. With Thesis 2.0 it is possible to upload Thesis with WordPress like other themes.

When you enter the Thesis 2.0 panel for the first time, you are welcomed by a transparent page and a green [Click to Get Started] button, which you have to press to continue.

At the top of the page is the Thesis menu bar located. This menu serves six buttons:

• Site
• Skins
• Boxes
• Packages
• View Site
• More

To start with the last two; the [View Site] button brings you to the front-end of your site, while the More button offers links to Thesis resources – Blog, User’s Guide, and Support Forum.

Thesis Boxes are the Thesis 2.0 equivalent of plugins – PHP code. Boxes are skin independent, meaning that a Box added in one skin will be available in other skins too. Thesis Packages are CSS code that you can apply to page elements.

The Thesis 2.0 Site Options

Hovering over the [Site] button in the Thesis menu opens a drop down menu:

• HTML Head Editor
• Tracking Scripts
• 404 Page
• Home Page SEO

The HTML Head Editor allows you to tweak some general site settings like Title Tag, Meta Robots, RSS Feed and Header Scripts. Only six of the ten toggle boxes show a Gear icon when hovering over the box, indicating there are options to customize. Although the Favicon box shows such an icon there is no field to enter a URL or a button to upload a file.

At the Tracking Scripts you can either enter your Google Analytics Tracking ID in a text field or enter the JavaScript code in a box.

The 404 Page option allows you to select one of your WordPress pages as a custom 404 Page in case of a Page Not Found situation.

At the Home Page SEO settings you can enter the Title Tag, Meta Description, Meta Keywords, and some Meta Robots (noindex, nofollow, and noarchive).

Thesis 2.0 Skins

The [Skins] button gives you two options:

• Select Skin
• Skin Editor

Thesis 2.0 installs with two skins – Thesis Classic and Thesis Blank. The first skin mimics the Thesis 1.x styling, while the last one presents a completely blank canvas.

A nice feature is that you can preview a skin by hitting the [Preview Skin in Development Mode] button. By clicking that button, administrators are able to preview the skin under construction on the front-end, while visitors to the site continue with the current active skin.

The Skin Editor is of course the most existing part of Thesis 2.0. You can either modify the Thesis Classic skin or create your own from scratch. Based on earlier experiences, I decided to create a new skin.

Upon launch, the Skin Editor will open the skin in preview mode or otherwise the active skin. The Skin Editor comprehends the menu bar at the top, the canvas at the left, and three boxes at the right.

The menu bar at the top of the screen serves six buttons:

• HTML
• CSS
• Images
• View Your Site
• Thesis Admin
• Save Template

You use the first three buttons to build your site. The [View Your Site] conveys you to the front-end, and you the [Thesis Admin] button brings you back to WordPress. And the green [Save Template] button stores your work, of course.

The Skin Editor starts in HTML Mode – with the Template Editor. Besides an empty Body container, the canvas at the left side of the screen is still completely blank – just like the front-end.

In the left corner, just below the menu bar, you will see the name of the current template – Home in this case. Clicking the Template Name triggers a wizard allowing you to select other templates, or create a new one.

Clicking the gear icon at the right side of the template name button – it is really a matter of hovering – allows you to select JavaScript libraries and set the number of posts for the loop.

At the right side of the screen we have three boxes. The top box is like a desktop where you can temporarily store the stuff you are working on. The bottom box acts like a recycle bin. Boxes dropped into this area will be deleted from all templates when exiting the Template Editor.

The middle section allows you create new boxes. When adding a box, you have to assign a type to it. You can choose from:

• Container
• WP Nav Menu
• Post Box
• Comments
• Comments Form
• Trackbacks
• Query Box
• Widgets
• Text Box

Adding a box is a four step process:

1. select a type
2. give a name to the box
3. drag the box to the desired spot on the canvas
4. click the gear icon and enter the desired  settings and values – like CSS selectors (ID’s, classes)

Every time you save the template under development, the site is reloaded on the front-end showing you your progress with it. Of course, the site still looks quite naked in this stage, since there is no CSS applied to it yet.

As soon as you create a widget with the Template Editor, this widget area becomes available on the WordPress Widgets page (Appearance >> Widgets). BTW, Thesis 2.0 comes with four custom widgets: Google Custom Search, Killer Recent Entries, Search Widget, and Subscriptions.

The first encounter with the Template Editor was quite annoying. After playing around a bit with it, you learn how to handle it. In order to drag boxes to another container area, you need to press Shift+drag. Within a certain container, you can simply drag the box – without the need to hold the Shift button.

Nevertheless, since I do most of my work on a laptop, I find Shift+drag not very convenient. Anyway, creating a page template is not really difficult. But it is important that you understand the concepts of CSS IDs and CSS classes. Fortunately you do not have to understand PHP classes.

The Thesis 2.0 CSS Editor

Since we want to dress up the site about with some styling, we need to turn to the CSS Editor. The CSS Editor presents nearly the same menu bar as the Template Editor.

Only the [Save Template] button, has been replaced by a [Save and Compile CSS] button. Next to this green button, is the drop down menu of the Package generator located.

You can either build your CSS from scratch or apply packages. A package is a bunch of CSS rules that you can apply to template elements – like a menu, posts, widgets, etc.

The first step is to create your own packages in collaboration with the CSS Editor. Via the drop down menu just below the Packages heading, you can launch a Package wizards for:

• Single Element Styles
• Links
• Horizontal Dropdown Menu (WP)
• Post Formatting
• Columns
• Comments
• Form Input
• Widgets

Let us have a look at the Post Formatting Package. From the drop down menu in the upper right corner, we select Post Formatting. The Packages wizard appears to help us create the necessary CSS.

The wizard presents three tabs: Package, Options, and Additional CSS. The Package details include entries for the identification of the package: Name, Reference, and CSS Selector.

The Options tab includes toggle sections for Font Settings, Headlines, Sub-Headlines, Lists, and Typography. Only sections relevant to the package regarding are presented here, and every section prompt us to enter necessary details.

Opening the Font Settings for example allows you to:

• select a font – from a list of about 30)
• enter a font size
• select a font weight – normal, bold, etc)
• enter a line height
• select the preferred text alignment – default, left, center, right and justify

When your site design demands CSS rules that you have not been able to enter via the wizard, you can enter these under the Custom CSS tab, which is basically one big text area.

When you are done with the CSS, you click the [Save and Compile CSS] button in order to generate and the actual CSS.

Adding Images with Thesis 2.0

At the right of the HTML and CSS buttons in the menu bar sits the Images button. Apparently the WordPress Media Uploader was not good enough, so Thesis comes with its own uploader.

Images added with Thesis will be added to the images folder of the skin regarding – not to the usual WordPress uploads folder. Why re-inventing the wheel here?

And Now What?

The Thesis community has been waiting a long time for Thesis 2.0 However, I think that the launch was a bit premature. Today, two weeks after the launch, there is still no documentation, there are no tutorials, there are no additional boxes, and there are no additional packages.

We are not talking about a free open source framework, but about a near $200 premium framework with over 50,000 users who have been waiting years for Thesis 2.0. I am sure it is just a matter of time before these issues will be resolved. Either by Thesis or otherwise by the Thesis community.

Yes, I am willing to admit it: Thesis 2.0 looks very promising. It is possible to create page templates simply by drag-and-drop, without coding any PHP. However, I expect that it will be hard to avoid manual CSS coding completely.

May be I will give Thesis 2.0 another try when there is decent set of documentation available. However, I am convinced that it is possible to create websites with Thesis 2.0 without the need to code PHP.

Thesis 2.0 is available with three plans – in any case, you get a 30 day money back guarantee:

• $87 Thesis Basic
• $164 Thesis Basis Plus
• $197 Thesis Professional

The two Basic plans entitle you to only 12 months of upgrades, but with unlimited forum support. The Professional license includes not only unlimited forum support but unlimited upgrades too. Users of Thesis Professional will also get two additional skins and two additional boxes – both are not available yet.

Current owners of the Thesis Personal Option will get Thesis 2.0 for free, but without the Professional options – the additional skins and boxes. When you own a Thesis Theme Developer license you are automatically promoted to Thesis Professional.

When you are seriously interested in Thesis 2.0, the best source at the moment is probably the Thesis 2.0 Launch Party Replay video series. If you want to start working with Thesis 2.0, or even want to learn more about Thesis 2.0, you should check out that webpage.