Thesis 2.0 theme is unique and highly inflammable interactive. I say this, ’cause of its navigation menu covers every bit of your WordPress template. But, guess what? There is no proper Thesis 2 documentation available/ready yet, so end-user is not aware of theme capabilities.

Hands on Thesis 2 is a series of articles and requests from potential clients who are eager to handle new Thesis Theme. This tutorial explains about Thesis Head Editor, Skin Editor, Boxes & Packages which will help you build even better websites. I strongly recommend this article to people, who are new to Thesis 2.0 theme.

Thesis 2 Navigation Menu

New Thesis 2 Menu Bar

New Thesis 2 Navigation Menu

The new Thesis 2 navigation menu consists of 4 major items, that is Head Editor, Skin Editor, Boxes and Packages. Let’s learn about these in detail, below:

Website HTML Head Editor

HTML Head editor lets you manage < head > output of the website. HTML Head section is responsible for Website SEO, Page loading & other web analysis.

Thesis html Head Editor

Thesis HTML Head Editor

Thesis HTML Head Editor lets you manage, the following:

  • Add / Upload Favicon
  • Set RSS feed link
  • Webmaster Site Vertification
  • Google Rel Authorship
  • Embed Header Scripts

Thesis 2 Skin Editor

Skin editor is the most important, Ajax-Driven component of Thesis 2. New Thesis framework works on Parent-Child architecture where we work upon child themes, also known as skins. Skin editor lets you manage core WordPress templates, like index.php, single.php, archive.php etc. with drag-drop feature. You can now customize a WordPress website without writing any PHP code.

Thesis Skin Editor Part 1

Skin Editor: Edit Core Templates from WP-Admin

On any selected template, for instance Home, drag-drop boxes in Skin editor to create HTML structure of website. Drag-drop what? Arrrh! I know Skin editor is a bit tricky to grab in one-go. But, if you understand this, then things will be really handy.

Check out the info-graphic, explaining about Thesis Skin Editor – HTML Markup Structure, below:

Thesis Skin Editor Working Part 2

Thesis Skin Editor – HTML Markup Structure

In the above image, left pane shows the hierarchy of boxes in skin editor, where right pane shows HTML output generated by Thesis (view from firebug). Moreover, arrow points to a respective box in Skin editor, which is responsible for its HTML output.

To understand better, you should play around with default Thesis Classic skin which loads automatically when you install Thesis 2.

Thesis 2 Amazing Boxes

Thesis theme can extended by means of small modules, called boxes. Thesis Box functions like a plugin which can be reused anywhere in the website with drag-drop ease.

For instance, we have uploaded a Disqus Comment Thesis Box in the example below:

Thesis Amazing Disqus Comment Box

Thesis Disqus Comment Box

If we upload or select a box, it automatically gets added in Template editor. In this example, Disqus Comment box designed is for use in single template and hence it appears as a black-box in the skin editor’s sidebar. This is also a bug fix for Thesis 2 + Disqus Comment System.

Thesis CSS Packages

Packages, works similar to Boxes, are modules which help you to style font-family, width, height, background, color etc. Basically, Thesis boxes are PHP modules, where Thesis Packages are CSS modules. To be frank, Thesis Packages are required for advanced level blog development and multiple WordPress sites.

There are many other features in Thesis 2 which will be covered in Hands on Thesis 2 series of articles, so keep in touch via Twitter, Facebook or RSS updates.

That’s all folks!

For any query or further help required post your feedback as comments below.