Introducing Thesis 2.1

In July 2008, I released Thesis 1.0—the first premium theme with an options page. The WordPress landscape would never be the same.

With Thesis leading the way, themes took a turn for the positive by focusing less on idiosyncratic design and more on SEO, performance, and flexibility. The success of this approach led the market to demand theme “frameworks” (a term pioneered by Thesis), and that’s gotten us to where we are today.

Systems that Thesis 1 introduced, such as custom CSS, layout/design options, and the widespread use of hooks and filters to control HTML, have become the standard in WordPress themes everywhere.

But the foundation for this landscape was laid in 2008, and structurally speaking, very little has changed since. In other words, innovation within the WordPress theme space has almost completely stagnated.

Ultimately, we’re all running old code, and I’m sure you’ll agree—it’s time for an upgrade.

It’s time for the next big thing in WordPress themes.

It’s time for Thesis 2.1.

What Are the “Big Wins” in Thesis 2.1?

Before I go into mind-expanding detail, I’d like to share the 3 big wins in this new version.

The first big win involves simplification. After years of working with every web development tool under the sun, I had to ask myself: “Why aren’t these tools in the one place you really need them—your website?”

Well, now they are.

We have united the various tools needed for web development inside the browser, freeing you from the need to have a text editor and FTP client just to work on your site.

To eliminate the need for an external text editor, we created a new Custom CSS screen that includes syntax highlighting, find/replace capabilities, and a live site preview that will have you wondering how you ever lived without it.

With Thesis 2.1’s Custom CSS, you can make changes to your site design in a non-destructive environment, without fear of affecting what your visitors see. When you decide you’ve made the changes you want, you can save your Custom CSS, and only then will your design change for site visitors.

(And hey, how great is it that you can do this comfortably on your live site, without the need for a development server?)

And as for that FTP client? You may not need that anymore, either.

You can upload Skins and Boxes directly through the Thesis interface, and as we’ve already seen, you can edit CSS directly in your browser.

By removing the need for a text editor and FTP client, Thesis 2.1 significantly lowers the barrier to entry and reduces the pain of starting a new website (especially for new users).

Not having to explain to a new user what an FTP client is? Not having to get new users to find, install, and then learn to use FTP clients or text editors?

This is the definition of a big win, folks.

The second big win comes in the form of organization. Instead of an omnibus options page, Thesis 2.1 is thoughtfully arranged along lines relevant to you.

For starters, all of your mission-critical site management tools are conveniently located in one place. These tools—Google Analytics and Google Authorship, for example—are important to the overall success of your site.

Although you won’t access them frequently (most of them are of the “set it and forget it” variety), you’ll need these tools no matter what Skin you’re running. Find them all in Thesis’ Site submenu.

Unlike site management tools, most of your interaction with Thesis will come in the form of setting Skin options or tweaking your design. Because of this, we’ve placed these frequently-accessed options in the Skin submenu, where you can find them quickly and easily.

The days of hunting for options in a busy interface are over—with Thesis 2.1, you’ll know precisely where you need to go to do what you want to do. And when you get there, you’ll be greeted with a simple, powerful interface that will let your creativity shine.

The third big win in Thesis 2.1 is innovation. With its patent-pending color picker and updated golden ratio typography, Thesis can help you design the perfect site whether you’re a novice or pro.

The color picker is especially cool, because it combines new ColorScale technology and complementary colors to bring you nearly infinite color scheme potential. And after a minute or two of messing with this thing, you’ll be a color genius.

(Seriously, you’ll be able to create color schemes with a mathematical precision that would make Picasso jealous.)

And naturally, no Thesis update would be complete without some typographical advances. Not only can Thesis 2.1 tune the typography and spacing of your entire layout, but it can also fine-tune based on the specific fonts you’re using.

Some might call this “magic,” but for Thesis, it’s just another day at the office 😀

Classic Responsive Skin

As the name implies, the Classic Responsive Skin is indeed responsive. I’ll give you a minute to wipe away the tears of joy.

Although there are many aspects of this Skin worth mentioning—for example, rock-solid golden ratio typography on every device and full responsive dropdown menu support (lots of themes skimp on this step because it’s a real pain)—I want to focus on two aspects of the Classic Responsive Skin that you can use to unleash your creativity.

First, the new Content page is your one-stop shop for managing Skin content. The page is divided into two simple parts: Display options (for showing/hiding Skin content) and a linked list of editable Skin content.

Check out the video below for an in-depth tour of the new Skin Content page:

Want to show an author avatar with each post? Display options → click Post/Page Content → select author avatar → save. Boom.

Want to change content of the text box in your sidebar? Editable content → click Sidebar Text Box → enter the text you want → save. Boom.

The bottom line?

Actions that used to require hooks, code, and FTP clients can now be achieved in just a few clicks from the comfort of your WordPress dashboard.

Next, I’d like to introduce you to your favorite new digital playground—the Skin Design page.

With its deceptively simple interface, the Skin Design page invites you to explore Thesis’ new, patent-pending color scheme picker along with layout, font, and color controls.

Check out the video below, and you’ll see what I mean:

As I mentioned earlier, the color picker will turn you into a color genius, and the layout, font, and size controls beckon for you to experiment until you nail the perfect combination.

Your playground awaits in the new Classic Responsive Skin.

Custom CSS

In Thesis 2.0, the Custom CSS editor was buried in the Skin Editor, where only the bravest adventurer could find it. On top of that, the editor offered few benefits that would encourage someone to use it instead of writing CSS in a file, the old-fashioned way.

But not anymore.

In Thesis 2.1, we’ve moved the Custom CSS editor to the comfort of your WordPress dashboard, and we’ve thrown in some really nice touches that will have you pumped up about building sites with Thesis.

First, we’ve added syntax highlighting, auto-tabbing, line numbers, Skin CSS Variables (for advanced design shenanigans), and even keyboard shortcuts for save and find/replace functionality.

And it gets better.

The Custom CSS editor now features a Live Preview mode that pops open your site in a new window and shows you LIVE changes while you type in your Custom CSS.

Your visitors won’t be able to see these changes unless you hit the save button, so you can operate with confidence while you fine-tune the perfect look for your site.

Mission-critical Site Tools in One Handy Location

It’s time to start kissing superfluous Plugins goodbye.

With “one step easy” tools like Google Analytics, Google Authorship, Tracking Scripts, and 404 Page Control built right in, Thesis eliminates the need to maintain a garden of Plugins that serve such specific purposes.

Oh, and about that 404 Page Control? You can choose any Page from your WordPress installation to serve as your 404 page, so now you have complete control over your 404 page—no code required.

Helpful New Documentation

To help you hit the ground running with Thesis 2.1, we’ve prepared a Getting Started Guide that includes video walkthroughs much like the two you just saw.

And those of you who like to dig into the code and build things with Thesis will be interested in the new Thesis API documentation, too.

(That last link looks benign, but I’m tellin ya—there’s no going back once you click on it and dive in. You can build anything with Thesis, and it can be quite addictive…)

System Status for Better Troubleshooting and Better Support

Thesis 2.1 is by far the most rigorously tested and refined product we’ve ever released.

And although we think we’ve got a pretty good handle on all kinds of different server configurations and crazy setups that occur out there, we also know that we can’t predict every problem that might arise.

That’s why we’ve included a new System Status page in the Thesis Admin → More submenu.

The System Status page gives you a look at your Thesis, WordPress, PHP, database, and server configurations, so you can quickly troubleshoot if you find that some basic functionality is not working.

Even better, our expert support staff can analyze your System Status data and provide quick, accurate recommendations about how to resolve just about any issue you might encounter.

Also, over time, the System Status page is going to help us master every type of server configuration on the planet and thus refine Thesis even further.

Streamlined Skin Editor Interface

For the DIYers and advanced users out there, we’ve made HUGE improvements to the Skin Editor that are sure to thrill, especially if you used this tool in version 2.0.

For example, thanks to a smarter Box queue in the HTML editor, you’ll be able to build templates faster—and in a much more organized fashion—than ever before. Template feng shui, anyone?

And now that the CSS editor has a full suite of the most sought-after text editor features (just like the Custom CSS described above), you’ll be able to streamline your workflow by eliminating your external text editor.

Don’t believe me? (Or simply think Thesis couldn’t possibly have a CSS editor that could compete with your text editor of choice?)

Rick Anderson, who helps people build business websites, didn’t believe me, either:

I didn’t see how this could possibly be the case when Chris first suggested [getting rid of your text editor]. Now I’m sold…Thesis 2.1 comes with a shiny new CSS editor that includes syntax highlighting. It even includes some totally cool point and click code completion features that developers are going to love.

(Also, I highly recommend checking out Rick’s Six Reasons Thesis 2.1 Will Knock Your Socks Off, which is your gateway to 8 hours of intensive video tutorials and walkthroughs guided by Rick himself.)

Built-in SCSS/LESS CSS Pre-processors

This is an advanced feature, but experienced designers and developers familiar with SCSS and LESS are going to be mighty pleased to hear this.

In truth, if our experience is any indication, they probably won’t believe their eyes when they see this in action for the first time.

When we were testing this new feature and first started using it in the Custom CSS editor, Matt (who did the implementation) was a mind-blown, fist-pumping mess of, “Duuuuuude, people are going to LOVE THIS THING!”

And then we discovered that Skin developers can use Thesis CSS Variables with the SCSS pre-processor to achieve out-of-this-world dynamic CSS, all controllable by Design options?

Mind-blown, indeed.

The Thesis Community is Embracing 2.1

The buzz about Thesis 2.1 is escalating, and the community is excited! Check out some of the early reactions to this new version:

And from our forums:

This is another home run for Chris and the team!

You guys smashed it with this release and your support is awesome.

The Bottom Line

Thesis 2.1 is designed around the specific actions you take when building and maintaining a website.

Its innovative new controls will entice you to experiment and play, and its simplicity will give you confidence as you command your site with ease.

It’s time to see what the next 5 years of WordPress themes is going to be about.

It’s time for Thesis 2.1.

About the author: Thesis creator Chris Pearson is obsessed with optimizing the web and making sure every last detail receives the attention it requires. Follow DIYthemes on Twitter for the latest tips and info on building truly awesome websites.