I’ve been working with the Thesis Theme for WordPress for a little over a month now and for the most part I’m pretty impressed.  One of my favorite features is the ability to apply custom CSS to individual pages by creating classes in the name of the specific page you want to alter. For example, to apply custom styling specifically to your “About” page, use .custom.about in front of any of the IDs or classes in your stylesheet you want to change.

On one site I’m working on I wanted my “About” page to only have one sidebar instead of the two default sidebars that I’m using on the rest of the site. Using the same naming convention I mentioned above, I simply added the following to my custom.css file.

.custom.about #column_wrap {background:#4ebaff;width:890px;}
.custom.about #content {background:#fff; width: 770px; margin:0; padding:0;-moz-border-radius:.5em;}
.custom.about #sidebar_1 {display:block; width:120px !important;}
.custom.about #sidebars {display:none !important;}
.custom.about #sidebar_2 {display:block; width:0 !important;}

This was all fine and dandy until I wanted to use the same method to apply styling to my static home page. After numerous attempts I couldn’t find an answer. Finally I investigated the source code of my home page as it was being displayed and noticed this interesting little nugget body class="custom main-man". It appeared that this mysterious “Main-Man” was controlling the styling of my home page. So I raced off to my custom.css file, threw together some styling for my home page using the .custom.main-man naming convention, and “wahlah!” my problem was solved.

So who is this “main-man” and where did he come from?

Well, it turns out that I unknowingly created him. When setting up the initial site I named what would be the home page “Main Man” to avoid any confusion within WordPress if I named it “Home.” Later I changed the name of the title of the page but forgot to pay any attention to the slug. This just goes to show how awesome this feature of Thesis is.  Create a special CSS class using the naming convention of the page’s slug and presto, you’ve got a new custom page.