Customizing Thesis – Step By Step Manual

So you’ve bought Thesis. Now what?

Thesis is an extremely powerful tool, and contrary to many novice Thesis owners beliefs, it is very efficient, once you learn to use it.

Its confusing to put all the puzzle pieces together, so I’ll be compiling a comprehensive, step-by-step resource on how to start customizing your Thesis theme.

1. Before we start, lets go through a rundown of how WordPress and Thesis actually work… what they actually do.

So in a web-page, you basically have an HTML file, and a corresponding CSS file for styling. Now you can write HTML and CSS files from scratch on notepad, then upload them to a server and have that be your website… or use WordPress and Thesis to greatly simplify and speed up that process.

WordPress is an interface which has the purpose of getting your content (text, photo’s, video) up on the web in a organized blog-like fashion.

Don’t want your website to look like a blog?

Thats where Thesis comes in. Its possible to customize WordPress yourself… but you better be very comfortable with your programming skills and have spare time.

While customizing in Thesis can require some programming knowledge, the diythemes.com Thesis forums are very supportive and provide quick responses to your programming and customizing questions. So although Thesis is a paid theme, you can’t find support like that for a free application.

Ready to start customizing Thesis?

2. Get familiar with your custom.css file, and review your page source HTML to get a good grasp of what is going on in your page. Do this for Thesis pages which designs you’d like to learn how they designed their site!

You can view any Thesis theme’s custom.css file by typing in the source path in your browser.

For example, the custom.css file of this site is located in:

http://www.savwire.com/wp-content/themes/thesis_18/custom/custom.css

Now most Thesis sites will have “thesis” instead of  “thesis_18” in their directory path… that’s just the way I have mine set up.

To view a page’s HTML, in Firefox go to View > Page Source or simply press Ctrl + U.

Another great tool is Firebug, a plug-in for Firefox… a very powerful tool which actually lets you change ANY website’s HTML and CSS in real time, and see the changes in your browser.

3. The best way to learn is by example, so what I did was write content for my site, and then try to modify the design, by viewing other Thesis sites’ CSS and HTML.

I wanted to go simple with my website, and I stumbled upon MySchoolFolders.org in a thread at diythemes.com forums. I liked their design and so I started analyzing their HTML and CSS files, taking snippets to try to apply to my site, and at the same time, learn exactly how the Thesis framework actually works.

To customize, you will have to get comfortable using hooks. Here is a very good explanation by SugarRae of how and where you should use hooks, and why you need them: Thesis Tutorial – Hooks For Dummies

4. When designing your site, draw it out on a piece of paper.

Draw out each element and the associated coding that goes with it. This helps visualize the confusing coding and helps alot.

For hooks I do this, drawing out the correct order of hooks that I’ll be using on my site.

This makes it way easier to plan out your site, and after you draw out the hooks to visually see how they work, you will easily spot errors and be able to see what hooks might need to be added.