Thesis 2.0 Theme Review

Chris Pearson launched the Thesis WordPress Theme just a few years ago. It took traction… pretty much right from the start.

Thesis already has the pedigree that other WordPress Themes don’t have. Top sites and bloggers like the Domino Project, Tony Hsieh and Matt Cutts use Thesis as their Premium WordPress Theme of choice.

As we all know… building a new site is hard.

Its even harder when you look at the sea of WordPress Themes, and the fact that some of them are pretty bad. Even the premium ones! That’s why I wanted to take a serious look at Thesis.

Chris Pearson has a great sense of design aesthetics… so I’ve always been a big fan. Going back to his free WordPress Theme days.

You may be asking yourself… “Is Thesis worth $87?” Especially since WordPress has thousands of free themes, even Chris has free themes available for download.

I hope to answer these questions and give you my honest review of the Thesis WordPress theme below.

This review has been continually updated since it was first released in 2008.

A little backstory, I kept seeing Thesis everywhere. I decided to pick it up and take a serious look at it. Immediately I saw its potential and wanted to using it on some of my other sites.

I had first bought the single user license. So I wound up upgrading to the developer’s license so I can use it on this site and on my other blogs.

So here are my takeaways from having used Thesis on a number of sites:

Flexible Design

Thesis 2.0 is so much more than just a theme. With the release of 2.0, Thesis is now more of a template engine that will allow you to build your own designs from scratch. No longer are you starting with the base Thesis design then overriding HTML and CSS to get your preferred design.

This was a brilliant idea on Pearson’s part.

I love the fact that I can now easily add widgetized areas to my website by dragging a box onto the skin editor. This simplifies my life and makes for much less coding.

Thesis Page Skin Editor

The DIYthemes will also be releasing Thesis add-ons including packages, boxes, and skins that will help you quickly build beautiful websites.

Best in Class SEO

One of the biggest selling points of Thesis is that it’s developed with search engine optimization (SEO) in mind. Wordpress by default is one of the most search engine friendly blogging platforms out there.

However, it’s still not perfect and how your theme is laid out affects how search engines see your site. What does that all mean? It means that your customers are going to find you a lot easier.

I’ve seen themes out there with crazy code bloat, doing things that are terrible for search engines. Thesis is very clean and presents your content well, it uses a clean code structure, canonical urls, and the like.

Thesis has the ability to specify each post’s title tags and meta tags without a plugin like All in One SEO Pack.

Thesis also has built-in Schema and Google+ Author support which will help your website be better indexed by Google, and in many cases appear higher in search results.

Thesis Home Page Seo

Unique Features

As of 2.0, it does appear as if the Multimedia Box is still included in the theme. But, much of the same functionality can easily be replaced by using a container box in the skin editor.

Thesis 2.0 is now an entire template engine, and as such there are several unique features. Some of these are:

  • Skin editor which makes building a website from the ground up insanely easy.
  • Add functionality anywhere in your theme by dragging a “box” in the skin editor
  • Visually edit the output of HTML Head
  • Customize your 404 page just like any other page

Also:

  • You can specify which pages appear in your navigation menu and reorder them on the fly. This part is really flexible – you can even use a specific category’s posts or add a custom blogroll to it.
  • Configure how your Title tag is laid out.
  • Add Mint or Google Analytics tracking code without messing with your files.
  • Specify a post image and how it should be used in the layout. Just to name a few.
Thesis HTML Head Editor

Under the Hood

As impressive as the user-interface side of the feature list is in the new iteration of DIYTheme’s theme is, the inner workings might be even more impressive.  Full support for WordPress 3.x features such as the navigation menu are in place, Page Options has now grown into a complete tool that allows the easy tagging, categorizing, and taxonomy of pages, all of which are important for SEO purposes and come complete with optional per-them/per-category/per-taxonomy page headlines and SEO tags.

Easy to Understand SEO with SEO Character Counts

Back on the SEO front, SEO character counts are now available for the title and meta description fields.  These figures are important to keep track of for anyone who is optimizing their site. If you are one the few who aren’t, here is a guide.  Also important is the use of the all-important favicon, which can now be uploaded simply in the new HTML Head editor.

Support

This one is one of the biggest advantages of the Thesis WordPress Theme over other themes.

Support is stellar!

A big win for Thesis and future upgrades are FREE, also if you have any questions about the theme, Chris and the Thesis community is really good at helping you out.

I checked out the forum – Chris and his team have been answering all the questions they have been asked and have gone out of their way to really help people customize their sites. (You simply don’t get this from a free theme).

It’s Almost Perfect

Thesis is by far the most impressive theme I’ve seen out there when it comes to design, SEO, and features. After playing with Thesis 2.0 for several days, I feel confident saying this is one of the most powerful themes I have used.

With that said, the interface for Thesis 2.0 is confusing. Unfortunately, the DIYthemes team did not include any documentation with the launch of Thesis 2.0. This has left many developers out in the wind trying to figure out how to use the new 2.0 by themselves. There is still a ton of support from the community, which is keeping me on board. But, until documentation is released, I have decided to lower the rating on Thesis 2.0.

Conclusion

Over the years I’ve installed, tested, hacked, and played with a lot of WordPress themes (and have even created a few). The Thesis WordPress Theme has definitely impressed me.

It’s beautiful, very easy to customize, and comes with features you won’t find in any free theme.

Is it worth it? In my opinion, YES! $87 is not a lot to spend for something that will save you a ton of time, even if you end up customizing the heck out of it (which I know I will) all of your changes will be future proof due to how Thesis is designed.

Being SEO optimized from the start… was such a big win for me.

That meant more that MORE people would be finding me. And not just more people… but the right kind of people, people who where actually interested in what I was writing about.

Since I’m using Thesis on multiple sites. I paid $164 for the developer’s option. (price can be a negative to some, but it outshines other themes)

Just having as solid a foundation as Thesis provides makes it worth much more than that to anyone who’s serious about blogging.

So if you think that having a solid, flexible, straight forward WordPress Theme with an entire community of supporters, is important to you. Then Thesis is your Premium WordPress Theme of choice.

If you decide to get Thesis for yourself, I’d appreciate you clicking the link below to support Blogging.com and future posts regarding WordPress, themes, etc.

Thesis Pricing

 

Once you have installed Thesis… come right back. I started a series on customizing it. You won’t want to miss it. I’ll show you how to really pimp it out!

You’ll be tweaking Thesis to your hearts content.

Also use the comment section below as a forum for your Thesis questions.

Thesis FAQ – Useful Answers to Common Thesis Questions

If you’re reading this, you probably already know about Thesis – you may have even already purchased it, and now you’ve got dozens of questions about how to tweak it. You’ve probably been lurking on the DIYThemes forums for a while, and you may have noticed there’s a lot of people just like you.

There are probably thousands of questions being answered on those forums, but sometimes it’s hard to find the right answer to your particular question amid all the noise. So here’s a list of some common questions about customizing Thesis, with a quick solution for each.

Table of Contents:

How Can I Display Different Background Images in Different Regions?

You may already know that you can add a background image to your site adding this to the body:

body {
 background: #fff url(images/bkgnd.jpg);
}

But that modifies the background for the whole page – what if you want to use different background images in different sections?

First, for this tutorial, make sure you’re using the “Full-Width Framework” (accessible in the Design Options of Thesis). Then, make sure you upload any images you’re going to need into wp-content/themes/thesis/custom/images/ To add a background for just the header “region”, for the full width of the window (and including the navbar), use the following code in your custom.css:

.custom #header_area {
 background-image: url(images/bkgnd.jpg);
}

Below that, for the content “region” (where posts and pages appear), use:

.custom #content_area {
 background-image: url(images/bkgnd.jpg);
}

And for the footer “region”, use:

.custom #footer_area {
 background-image: url(images/bkgnd.jpg);
}

Note: you may want to have your body background match your #footer_area background so that when a page doesn’t extend all the way down to the bottom of the window, the body background will make the footer appear to fill the bottom of the window.

Now you may have noticed that while your backgrounds are styled, the main “page” of your site is still white, and it hides the background images you just placed. If this is not what you want (e.g., you want your backgrounds to show through), you need to style the .page class of each of those areas (in this case, remove their default white background). So for the header area, you’ll use:

.custom #header_area .page {
 background: none;
}

Last tip – now that you know how to style the .page class independently, you can add a custom background image just for the .page “region” in each section, separate from the #content_area, #header_area, and #footer_area.

I Just Learned How to Use Hooks, So I’m Creating My Own Super-Cool Header from Scratch – How Do I Get Rid of the Ugly Default Header?

Hooks aren’t just for adding stuff. They’re also super-handy for removing stuff. Drop this in custom_functions.php:

remove_action('thesis_hook_header', 'thesis_default_header');

Can I Have a Second Navbar? (or a Third?)

You’ve already got your primary WordPress-generated navbar, automatically displaying the pages and categories that you have chosen in your Thesis Options. How do you display another navbar somewhere else without screwing up the first one? Don’t mangle your wp_query(), just make your own! Build a simple HTML unordered list, fill it with links, and format it with CSS to match the default navbar (Thesis’ .menu class) or any way you like. Place the following in custom_functions.php:

function my_other_navbar() { 
     <ul id="secondary_nav">
	<li class="first"><a href="sitemap">Sitemap</a></li>
	<li><a href="search">Search</a></li>
        <li class="last"><a href="http://www.myothersite.com">Visit my Other Site!</a></li>
     </ul>
add_action('thesis_hooks_before_header','my_other_navbar');

This particular hook will place our new navbar at the top of the page before the header. Consult the Thesis Hook Reference List for other location options. Combine this tip with the last one about removing hooks, and you could kill the Thesis navbar altogether and replace it with your own hand-coded nav!

remove_action('thesis_hook_before_header', 'thesis_nav_menu');

How Can I Display an Image from the Post Next to the Headline?

Headlines can be much more eye-catching when they have pictures next to them. You already have images in the content of your posts, but what if you want to display a specific image for that post elsewhere, like on the home page (for featured posts) or on archive listings? How can you retrieve a post’s picture without using a plugin or dealing with cryptic custom fields?
Thesis has a solution: when editing a post, Thesis includes a metabox named “Post Image and Thumbnail”. If you place an absolute URL to any image (even ones you have uploaded already in your post content), Thesis will associate that picture with the post, generate a thumbnail version automatically, and you can retrieve that picture anywhere you want. Use the image upload buttons while editing a post to upload a picture, and copy the direct link to the file you just uploaded. Paste that link in the “Post Image” field below your text editor. You can leave all the other settings alone, and Thesis will use the defaults set in Thesis Options for post image formatting and thumbnail sizes, or you can override those settings just for this post.
postimage

If you want to create your own thumbnail (different from the Post Image), you can upload it the same way and paste the link in the “Thumbnail Image” field. If you leave that field blank, Thesis will generate a thumbnail for you based on the Post Image field. Save your post, and if you are displaying Teasers anywhere on your site, you should notice the thumbnails appearing next to the teaser text already.
If you want to manually retrieve these pictures somewhere else (featured posts, sidebars, etc.) use one of the following code snippets in a function:

// grabs the post thumb
global $post;
$post_image = thesis_post_image_info('thumb');
echo $post_image['output'];
// grabs the post image
global $post;
$post_image = thesis_post_image_info('image');
echo $post_image['output'];

For example, the following placed in your custom_functions.php will add thumbnails to any archive listing

function archive_thumbs() {
if (is_archive() || is_category()) {
  global $post;
  $post_thumb = thesis_post_image_info('thumb');
  echo $post_thumb['output'];
  }
}
add_action('thesis_hook_before_post','archive_thumbs');

How Do I Insert an Image Before the Post Content? Only on Certain Posts or Pages?

This technique works for anything – flash animations, videos, banner ads, etc. – that you want to appear above the post content (and just by changing the hook, anywhere else). Really, you can insert any chunk of html you can dream up. This is the basic method in Thesis of adding any content beyond what wordpress automatically generates. Start by copying the image you want to place into wp-content/themes/thesis/custom, then open your custom_functions.php file and add the following:

function insert_my_banner() { 
	<img class="my_banner" src="/images/my_banner.png" alt="" />

Now you should see your image inserted once before the content begins (but alongside the sidebars) on every page. If you want to have the image span the entire page (thus above the sidebars as well), just modify the <code>add_action()</code> line to read:

add_action('thesis_hook_before_content_box','insert_my_banner');

On pages that list multiple posts, if you want the image to appear repeatedly before each post, change it to read:

add_action('thesis_hook_before_post_box','insert_my_banner');

The possibilities are endless – you can discover all sorts of places to hook into by reading the Thesis Hook Reference List
Now, if you only want the image to appear in certain places, you need to add a conditional statement to your function (in this case, to limit the banner to the home page only):

function insert_my_banner() {
	if (is_home()) { ?>
		<img class="my_banner" src="/images/my_banner.png" alt="" />
}
add_action('','insert_my_banner');

Now your image will only be inserted into the page if the condition is met. You can check for category listings <code>(is_category())</code>, pages <code>(is_page())</code>, a single post <code>(is_single())</code> and many other possibilities that  <a href=”http://codex.wordpress.org/Conditional_Tags”>you can explore here</a>.

How Can I Get Rid of All the Border Lines between sections?

There’s always a border somewhere that just won’t die… so place this CSS in your custom.css file to wipe out all the borderlines:

.custom #header, .custom .post, .custom .teasers_box, .custom #footer, .custom #footer a, .custom #footer a:active, .custom #archive_info, .custom .prev_next, .custom #comment_list, .custom #comment_list dd, .custom #commentform, .custom #sidebar_1, .custom #sidebar_2, .custom #comment_list dt.comment, .custom #comment_list dd.comment, .custom #comment_list dl .bypostauthor .format_text, .custom #trackback_list {     border-bottom: 0px;
 border-top: 0px;
 border-right: 0px;
 border-left: 0px;
}
.custom #content_box, .custom #column_wrap {
background: none;
}

Can I Use Different CSS Styles for Different Pages on My Site?

Of course! While you can test for certain conditions in PHP [like is_category(3), is_page(15)] and insert css styles via custom_functions.php, it’s quite easy to just add specific CSS styles to your custom.css file. Thesis automatically generates custom CSS classes for pages and categories. For example, if you have a page called “About”, you can style the headlines red just on that page by adding this to your custom.css:

.about h1 {
 color: #fe2600;
}

On category listing pages (e.g. posts in the category “Gizmos”), use the category slug like this:

.cat_gizmos h1 {
 color: #fe2600;
}

For a single post that is in a certain category, target it like this;

.custom .category-gizmos h1 {
 color: #fe2600;
}

You can do anything – change backgrounds, font sizes, show/hide things – that you could already do with custom.css, but these styles will only target specific pages, and will override any site-wide styles.

How Can I Transfer My Thesis Settings from One Blog to Another or Preserve Them when Moving My Site to a Different Domain?

Thanks to the Thesis wizards at 3DogMedia, you can easily transfer all the settings you’ve customized in the Thesis admin panels. Combined with the files in your custom folder, you now have everything you need to perfectly recreate your site somewhere else.
First, get the plugin: Thesis Import/Export. Install it, activate it, and go to the plugin settings page. There, you need to click the button to “download current layout” for BOTH the Thesis Options and Design Options. This will result in two files downloaded to your computer. On your new site (or fresh WordPress install), you must install the plugin first, then just reverse the process and upload the files you grabbed from the old site (make sure you’ve kept them straight) with the “upload layout” button.
Also, make sure you’ve replaced the new site’s default custom folder with the contents of your old “customized” files (custom_functions.php, custom.css, images folder, etc.), and that’s it!

How Can I Add More Information to the Byline?

By default, WordPress displays the author of the post and when it was posted. How about adding some additional information? This example adds tags and categories to the Thesis byline, each on a new line, and with the needed classes to match the other byline items.

function add_to_byline() { ?>

', ', ', ''); ?>

' . get_the_category_list(',') . ''; ?>

If you want truly unlimited power to customize the byline, you can utilize the custom fields meta box to enter special data about the post (original source credits, designer, etc.). Then retrieve the custom field data and display it in the byline:

<pre lang="php">function add_to_byline() {
	global $post;
	$source = get_post_meta($post->ID, 'Source', true);
	if ($source) {
		echo '

Source: ' . $source;
	}
}
add_action('thesis_hook_byline_item','add_to_byline');

These byline hook functions can easily be adapted to display the author’s twitter feed, geolocation data, or any other snippet of code you might find useful.

Do Teasers Always Have to Display in Two Columns?

If you’ve fallen in love with Thesis’ “teaser” display option, but can’t live with the two-column layout they default to, you’re in luck! Place these styles in your custom.css:

.custom .teaser {
   width: 100%;
   margin-top: 2em;
   padding-top: 2em;
   border-top: 1px dotted #bbb;
   text-align: justify;
}
.custom .teasers_box {
   padding-top: 0;
   padding-bottom:0;
   border-top: 0;
}

Now each teaser will fill the full width of your content column! Just tweak your css a bit more to mimic the layout of sites like www.motorcademag.com and www.tutsplus.com

 

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.