Customizing Your WordPress Thesis Theme

I have been a big Thesis fan for a while now. It makes blog design so easy that almost anyone can do it. Thesis, by itself, looks pretty good. This blog is basically bare-bones Thesis. I really want to change things up here, but haven’t had the time to actually figure out what I want it to look like.

Not so with my other blog (or should I say my cat’s blog?) Omer’s Scratching Post. Omer is basically the mascot of The Pet Wiki, and the Scratching Post is a place for him to share his opinions, talk about pet related issues, and to let people know about stuff happening in his life and on The Pet Wiki.

Recently I’ve been making some big changes. At least the changes look big. With a few custom modifications to Thesis, everything looks great. You can make these modifications in the css and php in the custom folder that Thesis provides, but you don’t even need to do that. Just add the Thesis OpenHook plugin and you can edit the css and php directly from WordPress.

After you install the Thesis OpenHook plugin, you’ll notice some new menu items under Appearance in the left menu. We’ll get to that in a minute. Let’s start by trying to customize the background of your Thesis theme. DYIthemes, the creators of Thesis, do a great job explaining how to do just that. They give you a whole starter kit and walk you through the steps. The only thing that I’d change about their instructions is that instead of making modifications to the css and ftp’ing it back and forth, you can modify the css by clicking on Thesis Custom Styling in the left menu. It’s much more convenient to use.

For Omer’s Scratching Post, I wanted add a custom graphic of my kitty and his scratching post. The first thing that I did was create an image to use. I’m working on a budget and I don’t do all that much graphic work. Instead of buying a copy of PhotoShop (which is excellent software for creating graphics,) I opted to use Paint.net.

Paint.net is one of those little known, but very useful applications. It’s a very powerful image editor and it is absolutely free. If you’re nice, you can donate money to help out these very talented developers. Think of it as good karma to do so.

Now it’s time to create your graphic. Figure out how many pixels you’re using for your columns, and make your graphic that width. I chose to make the height on the graphic 200px. You can choose whatever suits your site best. I layered a few pictures of Omer (and you guessed it) his scratching post. I added a bit of text and viola! New header created.

The following brilliant information and css code comes from Logos for Websites:

Now that you have your image you’ll need to ftp it to the correct place on your site. OpenHooks can’t help you here. Upload it to /wp-content/themes/thesis_15/custom/images.

Click Thesis Options under Appearance in the left menu. Make sure that “Show site name in header” and “Show site tagline in header” are checked under Display Options, Header. If they’re not, select them and click the “Big Ass Save Button”.

Now we can go back into the css and modify it to use your new image. Click Thesis Custom Styling and add the following:

/* This line sets up our clickable background image based on the site title’s link */
/* DIY: Adjust the height & width attributes to reflect the actual size of your image */
/* DIY: Change the filename of your image to reflect the actual header’s file name */
.custom #header #logo a { display: block; height: 200px; width: 928px; background: url(‘images/YourImage.jpg’) no-repeat; outline: none; }

/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

/* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */

/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { height: 0; }

/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }

That’s it. You’re all done. It’s amazing the dramatic results that you can create with very little work. Don’t worry, I won’t tell anyone that you got it up in running in an afternoon instead of a week. 🙂