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.