Theme Development

An Introduction to Thesis: Overview


If you develop with WordPress you have probably heard the term "framework" before, and chances are you've developed with one.

If you haven't, you're in luck! This tutorial will walk you through the ins and outs of one of the most popular WordPress frameworks: A framework that over 55,000+ people are using - Thesis.

Thesis was created by Chris Pearson and launched back in March of 2008. The framework at its core was built to be "search engine friendly" and extremely fast loading, however many would argue that Thesis' best feature is its Visual Design Template Editor.


To fully understand how to develop with Thesis, it’s best to dissect and familiarize yourself with the Thesis settings and the template editor. It's also important to grasp the concept of boxes, skins and packages - which is what this tutorial series will help you understand by walking you through creating your first, customized Thesis skin.

What We'll Be Covering

  • Thesis Building Blocks & User Interface - Introducing you to the Thesis user interface as well as building blocks associated with developing for WordPress on the Thesis Framework.
  • Setting Up Site Information & Useful Tips - A run-down of available "site" options you can control using the Thesis Framework as well as tips for setting up your Thesis site. We'll also go through the initial stage of creating your skin for development.
  • Skins & Layout Structure - A comprehensive walk through focusing on creating and assigning page templates, re-using your templates for further development of other pages, and how to prepare your skin for packages.
  • CSS & Packages - This section will focus on teaching you how to create and apply a package to your Thesis skin as well as go over how to use the more complicated packages, such as columns.

For the sake of those reading, this tutorial assumes that you’re already familiar with WordPress theme development, HTML and CSS; however, even the most novice user can figure out the basics of creating a skin for their website as Thesis is very "end user oriented."

In fact, the entire framework utilizes “drag and drop” for just about everything, making adjustments is as easy as holding the shift key and dragging boxes around the template editor.

The Building Blocks of Thesis

To build your WordPress site using Thesis you need to first understand the basic components of the Thesis Framework. Thesis consists of three main elements:

  • Skins - Skins are essentially the same concept as WordPress themes; however, a Thesis skin utilizes all of the WordPress functionality from the get go - that is to say that skins are rooted into WordPress in such a way that you can do more than just "theme" your site, you can create admin pages, control functionality and much more.

  • Boxes - Boxes are very similar to "plugins" or "widgets" that can be used in conjunction with your skin. They are bits of code that add dynamic functionality to your site - for example, you could create a box for a content slider, form, author information, HTML structure, etc.

  • Packages - Packages add style to all aspects of your skin without actually having to dive into CSS code. In fact, Thesis goes so far as to provide users with an easy interface that allows those who aren't CSS ninjas to input their own margins, borders, widths, heights, etc. making customization easy for beginners.


It's important to also point out that Thesis comes with a rather robust section dedicated solely to handling your website’s other pertinent information, such as built in support for Google Analytics tracking codes, 404 page handling, and SEO options (i.e. setting your title tag, meta description, keywords and robot options).


Working together, Thesis skins, boxes and packages seamlessly create a WordPress website that utilizes all of the plugin/widget functionality you need - without all the load time and in a very "search engine friendly" way.

Now that you have a basic understanding of Thesis, in our next installment we will dive deeper into setting up our site information using the Thesis settings and start building our first Thesis skin.

Related Posts
  • Code
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Features: Saving DataApplication foundation 400
    When it comes to the web, almost any application that runs within your browser is backed by a data store of some type. Usually, these data stores are in the form of a type of database. Until recently, most applications were built on top of some type of SQL database, but with the rise of document-based databases such as CouchDB, other applications have begun to use other backends as well.Read More…
  • Code
    Theme Development
    An Introduction to Thesis: CSS & PackagesAn introduction to thesis 2
    In our last article, we covered how to setup your Thesis Skin's structure. Next we're going to cover how to style that structure using Thesis Packages. Now that we've got our boxes fully configured and ready for styling, we need to click on the CSS button at the top of our Skin Editor. This will direct us to the area where we can create packages and build the stylesheet this skin will use.Read More…
  • Code
    Theme Development
    An Introduction to Thesis: Skins & Layout StructureAn introduction to thesis 2
    So far in this series we've covered the building blocks of Thesis and how to manage your site's settings, but now we want to move toward building your website's overall structure and appearance, or "Skin" as it's referred to in the Thesis Framework. To do this, we’re going to be spending most of our time inside the Thesis Skin Editor. To get started, you will need: Thesis 2.0 A code editor of some sort (Notepad, Sublime Text, etc...) Basic HTML, CSS, and PHP knowledge Read More…