Thesis

Thesis is a modular design and template system for WordPress. It’s what would happen if WordPress suddenly decided to replace its core template “system”1 with something more robust that would enable you to:

  • Build Themes with a visual interface instead of being forced to deal with clunky hybrid PHP + HTML files
  • Turn code in template files into living HTML objects that can be edited, moved around, and extended for additional functionality
  • Backup, restore, import, and export Theme data (templates, CSS, and associated options)

Thesis enhances your WordPress installation with this awesome functionality, but it does a hell of a lot more, too.

Note: We do not sell Thesis directly, but you’ll be happy to know that Thesis technology is included in the Focus WordPress Theme.

In the following sections, we’ll take a tour of what Thesis can do, and then we’ll examine how all this stuff fits together to become the ultimate enhancement for any WordPress website.

The Basics: Adding Options to WordPress

Adding options is one of the most fundamental things Theme and Plugin developers must do if they wish to convey dynamic functionality to users. Here’s how the basic process works:

  1. Convey a <form> with options in an interface
  2. Process the options when the <form> is submitted
  3. Save options to the database
  4. Retrieve options from the database as needed

While this process is bad enough on its own, WordPress actually makes it worse by having an inconsistent and disorganized approach to options that appear in different locations.

For example, there are 4 major locations within WordPress where a developer might want to add options:

  • admin pages — Theme and Plugin settings pages
  • post meta — options inside the WordPress post editor
  • terms — options for categories, tags, and taxonomies
  • theme customizer — specialty design options

In what can only be described as pure madness, WordPress accepts options in a wildly different format for each location.

This makes absolutely no sense. The HTML specification consists of a finite number of input elements, and you only need a few of these elements to do practically anything:

  • <input type="text" /> — basic text input
  • <textarea> — expanded text input
  • <input type="checkbox" /> — checkbox
  • <input type="radio" /> — either/or radio selector
  • <select> — dropdown selector

There are very clear patterns in play here. No matter where you’d like to convey options, you are going to be working with these basic input types.

Instead of leveraging these natural patterns and accepting a single, intelligible syntax for options, WordPress accepts a different syntax depending on where you’d like to convey your options.

This is perhaps the greatest shortcoming of the WordPress platform. And by extension, the solution to this problem is also one of the most important aspects of Thesis.

The Thesis Options API

The best way to think about the Thesis Options API is to consider it a translator for WordPress.

As explained above, WordPress requires you to speak at least 4 different languages to convey options wherever you want. This is grossly inefficient and fails to leverage patterns that could make this process easier.

To rectify this, the Thesis Options API establishes a single syntax for options elements called the Thesis Options API Array Format. Here’s how it works:

  • You provide an array of options in Thesis Options API Array Format
  • The Thesis Options API translates these options into the idiosyncratic syntaxes WordPress can understand

The Thesis Options API Array Format streamlines the process of adding options to WordPress.

And perhaps even better, it removes the need to slog through code and tutorials to figure out how to talk to this or that part of the WordPress Admin.

While the Thesis Options API is massively useful, it only covers part of the process. In practice, you still need to “handle” options—sanitization, saving, and retrieving—after delivering them to an interface.

Similar to basic options delivery, these processes exhibit patterns that can be leveraged for serious efficiency gains.

Unsurprisingly, WordPress offers zero leverage here, but that’s where more sophisticated Thesis components provide a huge boost.

Thesis Boxes: The Ultimate Website Building Blocks

Let’s shift gears and consider WordPress Themes, which are essentially just a combination of structural templates (HTML) and style (CSS).

Templates are simply HTML output patterns. If you examine any WordPress Theme in detail, you’ll notice a lot of repetition between various templates and template parts.

Because of this repetition, attempting to change one thing in a Theme often necessitates changes to many different templates.

This is inefficient, and it’s also grossly technical because it requires customizers to manually edit template files.

But as we saw with options, we can use patterns to gain leverage and make template management easier and more powerful.

One way to do this is to turn repetitive HTML into objects that can:

  • have unique properties
  • be edited and moved around
  • be repeated in multiple templates

Within Thesis, these HTML objects are known as Boxes.

It might be useful to think of Boxes as “living HTML.”

HTML that’s manually written in a file is dead. It’s an artifact.

But HTML that exists as a code object that can be manipulated and deployed wherever you want? It’s alive—you can edit it, move it around, and even enhance it over time.

These “living HTML” objects—Boxes—provide serious leverage and serve as the building blocks for Thesis templates.

And as we’ll soon discover, the utility of Boxes isn’t limited to templates and HTML output. In reality, Boxes are the perfect way to deliver any kind of functionality to a WordPress website.

Boxes Provide a Complete Options Solution for WordPress

Earlier, we saw how the Thesis Options API makes it easy to deliver options within WordPress.

But delivery—simply having options appear in an interface—isn’t the full picture. A complete system must also process, save, and retrieve options as needed.

Thesis Boxes achieve this and provide game-changing leverage via valet solutions for options in the following locations:

  • Box settings pages
  • post meta
  • terms (categories, tags, and taxonomies)
  • templates

With this leverage in place, Thesis Boxes reduce the total options process to nothing more than the creation of a simple array to describe your options.

Let’s look at a couple of examples to see how this works.

Google Analytics Box optionsWe’ll start with the Google Analytics Box2, which only needs a single piece of data—your tracking ID—to add the Google Global Site Tag to your site.

And here is all the code required to convey, process, save, and retrieve this data:

protected function class_options() {
	return array(
		'ga' => array(
			'type' => 'text',
			'width' => 'medium',
			'label' => __('Google Analytics Tracking ID', 'thesis'),
			'tooltip' => __('Example tooltip', 'thesis')));
}

The code above is just a simple array that defines a text input. Notice how there’s no need to write any HTML; there’s no need to process or sanitize <form> data; and there’s no need to save or retrieve anything.

With the Thesis Box architecture, options “just work” when you declare them. Now THAT is easy!

Next, let’s take a look at the Title Tag Box3. As you may know, <title> tags are critical for SEO, but WordPress has never provided a way for you to enter <title> tag information in the post editor!

The Thesis Title Tag Box leverages Box architecture to deliver an input field precisely where you need it—in the post meta options of the post editor:

Title Tag Box post meta options

And now let’s look at the code required to deliver this option (and its associated character counter, which is an optional feature for text inputs in Thesis):

protected function post_meta() {
	return array(
		'title' => __('Title Tag', 'thesis'),
		'fields' => array(
			'title' => array(
				'type' => 'text',
				'width' => 'full',
				'label' => __('Custom Title Tag', 'thesis'),
				'tooltip' => __('Enter a custom title tag here.', 'thesis'),
				'counter' => __('Search engines allow a maximum of 70 characters for the title.', 'thesis'))));
}

Post meta options use the module syntax variation of the Thesis Options API Array Format.

Once again, this is all the code required to cover an impressive amount of technical drudgery:

  • Add a post meta module with Title Tag input to the WordPress post editor
  • Process and sanitize this data to ensure information security when the form is saved
  • Save this option to the database
  • Retrieve this option to output it in the document <head>

Bottom line: Thesis Boxes make it easy to deliver options anywhere in WordPress.

Thesis Templates are just arrangements of Thesis Boxes

Templates are HTML output patterns. And as we’ve seen, Boxes are “live HTML objects.”

So what do you get when you put a bunch of Boxes together in a meaningful way? Templates!

But instead of consisting of a bunch of hybrid PHP + HTML files (like antiquated WordPress Themes), Thesis templates consist entirely of data—and this data is mostly just an output order for various Boxes.

You read that right. With Thesis, there are no template files.

This means you won’t need an FTP client to manage your templates. You won’t need to edit code. You won’t need to navigate the expansive and confusing landscape of WordPress template tags.

With Thesis, you can edit your templates in a powerful and intuitive visual interface:

Thesis Skin Editor

Templates are simply a nested arrangement of Thesis Boxes.

This significantly lowers the barrier to entry for customizations and levels the playing field between end users and developers.

And beyond all that? Building templates with Thesis Boxes is just plain fun!

Thesis Skins: WordPress Themes Built on Thesis

WordPress Themes are really just a combination of structure (HTML templates) and style (CSS).

In Thesis, these combinations of structure and style are called Skins.

We’ve already seen how Boxes and templates are sufficient to build a rock-solid website structure. Now it’s time to explore how to add some style.

With its variable-enhanced SCSS editor, Thesis delivers a dynamic CSS environment that can be leveraged to do incredible things.

Thesis Skin CSS Editor

The Thesis CSS Editor is enhanced with variables and an SCSS compiler.

For example, the Focus WordPress Theme—which is really a Thesis Skin—uses CSS variables to deliver Golden Ratio Typography:

  • The user selects a font and font size in the Design Options
  • Focus uses the Thesis Skin Typography API to calculate Golden Ratio Typography values
  • Focus updates CSS Variables with new values from Golden Ratio Typography
  • Dozens of values get automatically updated in the CSS as a result
  • The design is now proportionally optimized for the user’s custom settings

To understand why this is so great, you’ve got to understand the nature of most design customizations:

If you change one thing (like a font size), you probably need to change a lot of other things to maintain proportionality and to ensure everything “goes together” with the new settings.

This is a painstaking process, and it’s prone to errors because many changes are required in many locations in the CSS.

With the Thesis CSS editor, this process can be 100% automated, resulting in perfect adjustments every time.

1 The current WordPress theme “system” was released in 2005 and isn’t really a system at all—it’s a file naming convention run by a big if-else structure. It provides essentially zero functional leverage for the things Theme creators need to do.

2 The Google Analytics Box is included in every Thesis installation.

3 The Title Tag Box is also included in every Thesis installation.