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 this inefficient and imprecise, 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 website functionality.

Boxes Provide a Complete Options Solution for WordPress

Earlier, we saw how the Thesis Options API makes it easier 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.

Boxes are the building blocks of the Thesis template system

Thesis Boxes are really just a smarter, more leveraged, and more efficient version of WordPress Plugins. that makes them easier to incorporate into templates.

Think about your website for a moment…

When you get right down to it, your site is just content, a design, and some added functionality:

  • WordPress handles your content
  • Your Theme handles your design
  • Plugins provide added functionality

This arrangement clearly works—after all, WordPress powers over 1/3 of the internet—but it also has some serious shortcomings for everyday users.

We already explored how WordPress fails to provide Plugin and Theme developers with useful leverage for adding options.

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.