5 Tips on Getting Started with the Thesis WordPress Theme

27 May
27/05/2009

Having tried many other WordPress themes for 24100.net before, I absolutely fell in love with Thesis. Thesis is a professional theme created by DIY Themes which comes with built-in search engine optimization (no additional plug-ins needed), a unique approach for customization and fantastic customer support.

Prior to switching to Thesis I’ve been using a design provided by WooThemes. It also worked like a charm but adding social media features without breaking the advanced theme design ultimately got more and more difficult. So I’ve decided to give Thesis a try. And I fell in love.

Thesis is not free. But it’s well worth your money.

This article covers tips from my ongoing journey of customizing Thesis the way I want.

1. Read the Thesis Theme User’s Guide

This should be a no-brainer. However, if you are a WordPress mastermind, chances are, you might want to skip the boring manual and jump right into editing PHP and CSS theme files. Don’t do so. Thesis comes with a pretty unique customization approach which totally separates changes you make from the theme’s own code base. This ensures that future update don’t break your changes. If you’re a WordPress Pro and only got a minute, read Chapter IV, “Code-based Design Customizations”. The guide is available here.

2. Prepare for customization

Prior to uploading the theme to your web server rename the “custom-sample” folder to “custom”. The files inside this folder will be your one-stop location for code based modifications.

In the WordPress control panel go to Appearance > Thesis Options and activate “Use custom stylesheet” in the Design Customizations section. In the Display Options section disable the “Show default sidebar widgets” checkbox, turning off the two placeholder widgets that ship with the theme.

If you want to go for a magazine style front page, for “Number of featured posts to show” in Home Page Display choose 1 or 0.

In Appearance > Design Options define your basic column layout in the Site Layout section. I prefer a slightly wider content area as the default and have chosen 3 columns, 520 pixels for the content area and 195 pixels for each sidebar.

3. Check your Sidebar Widgets

I strongly recommend to first check whether all of your standard widgets work as before. Almost all widgets are supposed to work. In case you’re experiencing wired layout problems (such as sidebar content that appears in the footer section) carefully check the generated HTML and CSS with a tool like Firebug.

4. Using the Thesis Hook system 

Thesis provides you with centralized hooks to link your own code into the theme’s rendering flow. The beauty of this approach is that it ensures a clear separation between your own custom code and the evolving codebase of the theme itself. Upload future updates of the theme’s code are not going to break your customizations.

The way it works is simple: In the custom_functions.php file inside your custom folder you can define an arbitrary number of PHP functions that render (echo) content. You then use Thesis’ add_action() and remove_action() functions to link your custom rendering code into the rendering flow of the theme.

Hooks are available for almost every aspect of the rendering process and you generally get a pre-hook which is called prior to the theme’s built-in rendering function and a post-hook which will be called after the built-in rendering has been executed.

At 24100.net I’ve implemented the Subscribe options at the top left via the hooks system. (Alternatively I could have used the WordPress Text widget but I do prefer to have all customizations in a central place.)

To achieve this in my custom_functions.php file I’ve defined:

function subscription_options() { ... }

Inside this function I simply output the HTML code by using PHP’s echo method. I then “hook my custom rendering function in” via

add_action('thesis_hook_before_sidebar_1', 'subscription_options');

The named hook thesis_hook_before_sidebar_1 means that I want my rendering function to be called before any of the WordPress widgets get rendered. A list of all Thesis supported hooks is available.

If you use WordPress widgets the WordPress engine takes care to wrap the content into the correct styles automatically. It is important to understand that this is not the case when you’re going to use hooks. Then it’s entirely up to you to provide the correct markup.

Thesis heavily relies on cascading style sheets (CSS). Sidebar widget content must be surrounded with

<li></li>

tags and at minimum have the class attribute set to

widget

As said before the standard WordPress widgets automatically adhere to this convention. To stick with the above example, the first line in my subscription_options() function is:

echo('<li class="widget widget_subscribe">

This guarantees that WordPress will apply the theme’s widget styles to my custom rendered output. By attaching a second class (widget_subscribe) to the list element, I can define additional styles in custom.css in my custom folder.

5. Get good plug-ins and code snippets

Obviously there is no one-size-fits-all recommendation for plug-ins that you might want to use. Because I’ve been asked before, here is a list of plug-ins I’m using and can confirm working for 24100.net:

  • Thesis OpenHook: This is a control panel plug-in that provides you with elegant web based access to the Thesis hook system.
     
  • Get Recent Comments: The nice little plug-in that renders the Recent Comments section in the right sidebar.
     
  • ShareThis: Once installed you’ve got a sharethis_button() function which you can use in your custom_functions.php to generate the ShareThis options as seen at the end of all posts here.
     
  • I did not find many really good 3rd party plug-ins to render my Twitter updates, so I’m using the HTML + JavaScript provided by the Twitter people. I had to do quite some heavy CSS fiddling until I got the desired look and feel but generally it works fine. I’ve used the code as generated by Twitter but cut and pasted the two <script> lines (blogger.js and the Twitter REST API call) down to the footer via Thesis Options > Stats Software and Scripts > Footer Scripts. This makes sure page rendering doesn’t get stuck when the Twitter servers respond with a delay.
     
  • The Community section in the left sidebar uses Google Friend Connect’s Members gadget (you might have to log in to access the site).

This concludes my five tips to get started with Thesis and I hope it helps others. In case you need professional help with your Thesis based WordPress site, yo can DM me on Twitter at any time.


Tags: , ,
1 reply
  1. natalie says:

    HI ralf, thanks for your helpful article. I’m wondering if there’s a way to have different side bars showing on different pages without knowing coding?
    Would much appreciate it if you can help me.
    Natalie

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Copyright 2013 by Ralf Rottmann. rottmann.net is a work in progress by Ralf Rottmann. This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
If you would like to make use of any of the content you see here, please contact the author.