Understanding Thesis 2 and Its Data-driven Approach to WordPress Theme Building

Thesis 2 is truly one of a kind. That needs to be said early and clearly because it must be understood that we are not dealing with a typical WordPress theme or framework.

thesisWhat Thesis produces on the front-end of a WordPress site is the same as what you’d expect from a basic theme. But what it does on the back-end is what makes it special.

What we’re going to do here is discuss how Thesis builds WordPress themes.

This is not a technical guide on how to use Thesis. However, if you understand what a WordPress theme is supposed to do, how it usually does it, and how Thesis takes a different approach, you’ll understand how to use it.

Let’s get started.

How a Typical WordPress Theme Works

WordPress themes are built with a template system. Different static files come together to act as one and output completed web pages on the front-end. It’s that simple.

For a basic WordPress theme with a content/sidebar layout, the header.php, footer.php, sidebar.php, and a content related template file are used on almost every single page.

layout-pagesAs explained in Part 1 of the How to Build a WordPress Theme course, these files include code that if brought together in one file, they would create a standard HTML web page structure from opening <html> tag to closing </html> tag.

PHP’s capabilities are used to separate the different HTML components of this web page structure into individual files that combine with each other and create the front-end results strategically based on what kind of page is being loaded.

In other words, template files are used but PHP determines which template files are used to produce the final result.

How the Thesis Theme Framework Works

Thesis takes a very unique approach to theming by eliminating the template files altogether. That’s right. It serves web pages to the front-end without any template files.

Instead of using template files, Thesis uses data to create web page layouts “on the fly.”

Don’t get too carried away and dismiss templates completely. Thesis still uses them. Instead of static file templates, though, it uses a drag and drop user interface (UI) that allows you to build templates.

These UI templates are built with “boxes” that represent pre-written HTML and PHP and can be placed anywhere within a given template.

<img data-attachment-id="442" data-permalink="http://buildwpyourself.com/understanding-thesis-2/thesis-single-template/" data-orig-file="http://buildwpyourself.com/wp-content/uploads/2014/01/thesis-single-template.png" data-orig-size="986,600" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":""}" data-image-title="thesis-single-template" data-image-description="" data-medium-file="http://buildwpyourself.com/wp-content/uploads/2014/01/thesis-single-template-300×182.png" data-large-file="http://buildwpyourself.com/wp-content/uploads/2014/01/thesis-single-template.png" src="http://buildwpyourself Learn More Here.com/wp-content/uploads/2014/01/thesis-single-template.png” alt=”thesis-single-template” width=”986″ height=”600″ class=”aligncenter frame size-full wp-image-442″ srcset=”http://buildwpyourself.com/wp-content/uploads/2014/01/thesis-single-template.png 986w, http://buildwpyourself.com/wp-content/uploads/2014/01/thesis-single-template-300×182.png 300w” sizes=”(max-width: 986px) 100vw, 986px” />

So at this point, you should understand that you are not dealing with template files. Instead, you’re dealing with a UI that gives you a visual representation of what a template file would look like. It’s still just a UI, though.

What Thesis does is allow you to determine which UI templates represent specific types of WordPress web pages being loaded in the browser. Then, based on the alignment and configuration of the boxes in your templates, which are actually just data, HTML structures are built and delivered to the front-end based what page is being loaded.

That’s about as simple an explanation as I can give. The reason why so many users don’t understand how to use Thesis 2 is because many users don’t understand WordPress themes to begin with. Thesis follows the same patterns but just uses different methods (no pun intended, for those who get it).

So when it comes to building a theme in WordPress using Thesis, it’s best to think of Thesis as a data-driven template builder as opposed to a traditional framework.

thesis-boxesMost everything you would normally do with static template files and code, you can do in the Thesis Skin Editor UI. There are a number of built-in boxes that serve different purposes and you’d select the box that’s right for the functionality you’re trying to add.

Once a box is part of your template, it’s packed full of options relevant to its purpose.

For example, the “HTML Container” box has a few basic options. It allows you to select what kind of container it is (<div>, <span>, <p>, etc.) from a simple drop down selection, set a container ID, and even set multiple classes.

So everything you’d do when writing raw HTML and PHP inside of your template files is built inside of Thesis’ Skin Editor UI.

footer-container

Looking at those ID and Class fields, it makes you wonder how to handle CSS in Thesis 2. It’s simple. You’d handle it the same way you would in any other theme except that you’d use the built-in Thesis CSS editor.

While almost every WordPress theme to ever exist uses the mandatory style.css file to set its main styles, Thesis, once again, takes more of a data-driven approach.

Instead of having the developer/designer write styles to a static file, he or she would build styles inside of the Thesis UI so that it could be stored as data and used in conjunction with style rules from other data.

thesis-skin-css

The end result is one final stylesheet called css.css which strategically displays all theme CSS in one file. While this file does exist on the server and can be edited, there’s no need to tinker with it.

Oh yea… I should probably mention those strange CSS values you see in the picture, huh? Those are variables!

While the Thesis CSS editor does have some advanced preprocessor capabilities, what you see here is simply the default functionality of the editor.

CSS properties and values can be stored in variables and used throughout the CSS editor just like you would use a variable in programming languages for basic tasks.

That means you can store a value like 1px solid #ddd in a variable called $border and use that variable in your stylesheet as many times as you’d like. Then, if you ever wanted to change that value for your theme design, you’d simply edit the variable.

No more searching and replacing in thousands of lines of CSS just to make simple changes. Pretty cool, huh?

Understanding Thesis 2 takes a few things:

  • an understanding of basic front-end web development
  • an understanding of WordPress themes (take the course)
  • hands on experience with the framework itself

That’s right. You have to dig in. Putting it to use is the only way to see its true power.

If you’ve never used Thesis, it’s a great tool to have in your tool belt whether you use it for every project or not. Go ahead and check it out.

Leave a Reply

Your email address will not be published. Required fields are marked *

*