Why Developers Love the Thesis WordPress Theme

(Originally posted on Building43, Rackspace’s community website)

Frameworks have become all the rage in the development community. There’s Rails for Ruby, Blueprint for CSS, and now Thesis for WordPress.

Thesis provides a wonderful base on which you can build your WordPress site. It was built with SEO in mind, and comes with extensive design options for handling the majority of theme modifications. Outside of the design options, your changes to the site are stored in two files, which increases the re-usability  of code as well as making it easy to upgrade the site in the future.

It’s being used by some popular blogs including Matt Cutts, Laughing Squid, and Chris Brogan. I try to build most of my clients’ sites in Thesis, as I don’t have to ‘reinvent the wheel’ by building a custom theme from the ground up.

So why should a developer use Thesis?

Design Options

When you first install Thesis, you’re presented with two pages of options: Thesis Options and Design Options.

The Thesis Options allow you to do things like:

• Change your RSS Feed if you’re using FeedBurner
• Add Header and Footer scripts, for things like Google Analytics
• Determine how your posts are displayed throughout the site
• Customize your Navigation menu. Choose pages you want to display, drag-and-drop their order, and select child pages to automatically generate dropdown menus
• Set a default size for Post Images and Thumbnails. No more opening up Photoshop and manually resizing images.

The Design Options allow you to do things like:

• Determine the number of columns of your site (1,2,3), their pixel width, and arrangement
• Use a page or full-width layout (useful for headers/footers that span the whole width of the browser window)
• Set the font families, sizes, and colors of all different text elements, including headers, navigation, content area, sidebars and footer
• Customize the Multimedia box (displays above the sidebars) with rotating images, a video, custom code, or hide it.

Further Customizations

When you’re ready to start editing some code, open the “custom” folder. Any CSS changes you’d like to make go in the custom.css file. Make sure you begin each CSS change with the class .custom as that will make it more specific than the default CSS code, allowing your code to overwrite it. In this way, your CSS changes are not destructive, and can be reversed by deleting or  commenting out your CSS code.

For example, let’s say you wanted to replace the blog’s title in the header with a logo. You’d upload the logo to /wp-content/themes/thesis/custom/images, then put the following in your custom.css file:

.custom #logo {background-image: url('images/logo.gif'); background-repeat: no-repeat; width: 170px; height: 145px; text-indent: -9999px; }
.custom #logo a {width: 170px; height: 145px; display: block; outline: none;}

HTML and PHP edits will go in custom_functions.php. Thesis uses a series of functions and hooks to edit the theme, rather than physically changing the theme files. Here’s a visual guide to most of the available hooks. You simply create a new function and put your code inside it:

function my_new_function() {
echo 'Hello World';
}

You then add that function to a hook, using this format:

add_action('thesis_hook_name','my_new_function');

The best way to explain is by example, so I’ll show you how to do a simple change to Thesis that would require modifying the original code of a standard WordPress theme.

Let’s say you want to move the navigation menu below the header. On a typical theme, you’d have to open header.php, cut the code and paste it where you want it, then make sure everything still works correctly. In Thesis, the navigation menu is stored in a function called “thesis_nav_menu”, so you just have to add this to your custom_functions.php file:

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_header','thesis_nav_menu');

Now for a more interesting example. Let’s say you want to add an additional sidebar to the footer, so you can drop in ads using the Widgets panel of WordPress. This is what you’d put in (here’s a tutorial that describes this example in detail):

register_sidebars(1,
array(
'name' => 'Footer Ads',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function ads_in_footer(){
dynamic_sidebar('Footer Ads');
}
add_action('thesis_hook_footer','ads_in_footer');

While Thesis looks great by default, it’s also extremely customizable with the Design Options, and in a more advanced way with functions and hooks.