Build a Beautiful, SEO Optimized WordPress Site Quickly with Thesis

by Matt Montaruli on October 4, 2012

If you ask any Web Designer, a beautiful and clean design is important for any site; and a WordPress site is no exception.

WordPress themes allow you to quickly select a design that you can use to get your blog put together and running quickly.

However, if you want a more customized design and something less cookie-cutter, you should consider purchasing a premium WordPress theme. Unlike standard free themes, many premium themes function more as a design framework that you can easily customize, rather than just a WordPress skin.

Thesis is one such example that makes it quite easy to customize the design. Its code is clean and SEO optimized and comes with a lot of easy admin tools and coding conventions to customize the appearance to your liking.

Below is a walkthrough on how you can get started in customizing your Thesis installation.

Update 10/5: Note: The screenshots below were taken from Thesis version 1.8 and should be relatively similar up until 1.8.5. Thesis 2 was just released on October 1st and is a complete revamp, so the below walkthrough wouldn’t apply to this new version. If you’re looking for a guide for Thesis 2, Rick Anderson has a wonderful set of Thesis 2 video tutorials over at the Build Your Own Business Website.

Thesis Administration

Thesis has a very powerful and flexible administration area, which allows you to customize a great deal of your site with little to no code.

When code is necessary, Thesis makes it very easy to add code as desired for further customization.

Below is a summary of the different Thesis admin areas.

Site Options

Edit general SEO settings for your site, as well as RSS feed settings and tracking scripts here.

Design Options

This section gives you a lot of control over the look of your site without needing to edit any CSS.

You can change the number, position and size of the columns on your site, the outer page padding and HTML Framework (more on this below). You can also edit the appearance and colors of headers, headlines, comments, sidebars, footers and more, as well as add (or link) any custom scripts or JavaScript libraries here.

HTML Framework

Thesis has two different “HTML Frameworks”–Page and Full-width. Page is useful if your header, content and footer sections will all have the same width.

However, you may have a design where the header or footer needs to be a different width than the content section. In this case, you’d want to use Full-width, which allows you to customize the different section widths individually through the custom.css file.

Columns

In the columns area of this section, you can change how many columns you’d like for your site (one, two or three), and if you want them left or right of the content, or both if you have two sidebars. You can also change the width of the columns.

Header Image Uploader

Here, you can upload a custom header image. I prefer to do this by hand via CSS, but it’s great having this as an option as well.

Favicon Uploader

This area gives you an easy way to upload a favicon. Just upload an ico or png and Thesis does the rest.

Custom File Editor

You can edit the custom.css and custom-functions.php files here, right from within the browser, as opposed to editing them locally and then uploading them.

Manage Options

Here, you can backup and restore the options you just set in the sections described above.

Making Custom Thesis Tweaks

Outside of the Thesis admin tools, using plugins and CSS, you can easily customize your Thesis theme even further to make it look however you want.

Thesis OpenHook Plugin

The Thesis OpenHook plugin (now called The OpenHook Customizations Manager) makes it far easier to add HTML or PHP snippets to your Thesis theme. It kind of a functions as a wizard for Thesis’s custom-functions.php file.

When using OpenHook in conjunction with thesishooks.com, you’ll be able to identify the name and position of each Thesis hook and easily add or edit elements to it accordingly.

All you have to do is navigate to the OpenHook settings in your admin panel, click on the Thesis Hook tab, then select the hook you’d like to customize from the dropdown menu. Once you select the hook, you’ll be presented with a text box where you can add code–HTML or PHP. This makes it very easy to move the location of your navigation menu, add elements to your header or pretty much anything else you can think of.

CSS Customization

Thesis has a very simple way to override its default styles–just edit the custom.css file and add ‘.custom’ to the beginning of any selector when coding your CSS. Thesis adds a class name ‘custom’ to the body tag, so by adding either ‘body.custom’ or just simply ‘.custom’ to the beginning of your CSS selector, you can easily override the default styles.

Use with Multisite

Customizing the Thesis theme is all accomplished through the “custom” folder, which contains your CSS and PHP customizations. Thesis is compatible with WordPress Multisite, as mentioned in our recent post.

When enabling Multisite, Thesis creates separate custom folders for each Thesis-themed site on your network. This way, the same Thesis installation is being used for each site on the network, but individual customizations for each site are preserved in separate directories.

You’ll know which custom folder relates to each Thesis site by a given site’s network site id. For example, if you have a blog with a site id of 3, the Thesis folder, “custom–3” would contain the customizations for that site.

You can edit the appropriate files in the custom folder as well as make any edits in the Thesis admin section without worrying about it affecting your other sites.

Have any tips or best practices for using Thesis? Prefer another premium theme like Genesis? Let us know in the comments below.