Redesigning My WordPress Blog with Thesis

Over the course of the last few weeks, I’ve been knee deep in blogging software. With the publication of our latest books, my friend and co-author Marc Kelly Smith wanted to revamp his blog at Slampapi.com/blog. He was using GoDaddy’s Quick Blogcast, which is a terrible blogging platform. I recommended that he switch to WordPress, which is infinitely better.

After switching from Quick Blogcast to WordPress, the next challenge was to find a suitable theme (the code that works behind the scenes to control the layout and appearance of the blog). With over 4 million WordPress Themes to choose from, we were a little overwhelmed. I contacted another friend and colleague, Mikal Belicove, who recommended I check out a theme he had heard a lot of good things about – Thesis. I watched the 16-minute Thesis Demo and was sold. Thesis seemed powerful, flexible, and easy-to-configure.

As with most tasks, “easy” is a relative term. It’s always easy once you know what you’re doing.

Well, let me qualify that statement. The truth is that in many ways, Thesis makes it very easy to configure the look and layout of your blog. With a click of the mouse, you can change font styles and sizes; choose a 1, 2, or 3 column layout; adjust the width of each column; rearrange the columns; add a YouTube video to a media box; and much more, as shown below.

Thesis makes it easy to change the look and layout of your WordPress blog.

This is all very nice, but I wanted to make some additional changes. For example, instead of having the navigation bar appear above the blog’s header, I wanted it below the header. I also wanted the cool header image that Marc’s son Adam designed for the blog to appear in place of the standard blog name and tagline. How to make changes like these was not so apparent. In fact, just looking at my Thesis options, I didn’t even know whether what I wanted to do was possible with Thesis.

Time for plan B: Read the manual.

The manual says that to make the types of changes I wanted to make, I would need to edit one of two files in the theme’s “custom” directory. Now the whole reason I bought Thesis is because I didn’t want to edit theme files or deal with CSS or php functions. This was a definite bummer, but I forged ahead like many others and am now a strong advocate for the Thesis theme.

I soon discovered the idea behind Thesis. In most WordPress Themes, you have to edit multiple files to control the look and layout of your blog. These files are packed with codes and settings. If you make a bunch of changes, tracking down those changes later can be nearly impossible. With Thesis, the core theme files remain unchanged. You make all changes to two files: custom.css (for style changes) and custom_functions.php (to add or remove functions through the use of “hooks”… more about hooks later).

In the following sections, I show some examples of changes I made to my blogs by editing these files.

How To Edit custom.css and custom_functions.php

The manual recommends downloading the file you want to edit, opening it in a text editor, like Notepad, making your changes, saving the file, and then uploading it. I have one word for you – don’t. I tried that. Here’s what custom.css looks like in Notepad.

In Notepad, custom.css is like editing a bowl of oatmeal.

Before you even think about editing custom.css or custom_functions.php, consider installing the Thesis OpenHook plugin – it’s free. With this plugin, you can edit the custom.css file directly in WordPress. In addition, you don’t have to touch the custom_functions.php file. You can disable functions and add new functions via OpenHook much more easily. (I’ll show you how to make changes with and without OpenHook to cover all the bases.)

The Thesis OpenHook plugin provides the tools you need to customize Thesis.

If you don’t want to use OpenHook, I recommend using the text editor that your domain hosting provider offers. For example, on Bluehost, I log into my account, choose File Manager from the Control Panel, navigate to the public_html/blog/wp-content/themes/thesis-15/custom folder, click the file I want to edit, and click the Edit button. The contents of the file appear as shown below. I simply enter my changes and click the Save Changes button.

Edit the contents of your files online.

Changing Styles with custom.css

Most WordPress themes contain a file called style.css that contains most of the formatting directives for the blog. Each CSS code is structured something like this:

selector { property: value; }

The selector indicates the object that the style applies to (such as a heading, paragraph, or image), the property defines the aspect of the object that will be modified (such as its color or alignment), and the value defines the setting for the property (such as blue or center). Here’s an example:

p { text-align:center; font-family:arial; }

In Thesis, you can choose to use the custom stylesheet. To do so, log into WordPress and then click Appearance, Thesis Options, Custom Stylesheet, and make sure Use custom stylesheet is checked. With the custom stylesheet enabled, you can use the custom class selector to override any existing style for any selector.

Here are some of the easy changes I made to my custom.css file (above each is a comment explaining what the new CSS declaration does):

/*Remove padding above and to left of header*/
.custom #header { padding-top: 0; padding-left: 0; }

/*Indent the tagline in the header 130px*/
.custom #tagline { position: absolute; left: 130px; }

/*When images are left-aligned add no extra space to the left, top, or bottom but 1em space to the right*/
.custom img.alignleft { margin: 0 1em 0 0; }

/*Separate list items by 10px space in the content area – does not affect list items in sidebars*/
.custom #content li { padding-bottom: 10px; }

/*Reduce the space between widgets in the sidebars*/
.custom li.widget { margin-bottom: 10px; }

Note

Before you can change the property of a selector, you need to know what the selector is. To find out which selectors are used to format something in a post, create a post as you normally would in WordPress and apply the formatting. Then, click the HTML tag to see how it’s formatted. For example, a bulleted list will begin with <ul> and each item in the list will begin with <li>. The selectors for these items are ul and li respectively.

However, it’s more complicated than that, because selectors can be refined; for example, the selector li allows you to apply formatting to all list items, whereas li.widget applies formatting only to widgets arranged as list items. #content li applies formatting only to list items in the content area, not the header or footer, for example.

In some cases, you may have to open the Thesis syle.css file to see what Thesis calls a particular selector. Look, but don’t touch – do NOT edit this file.

Customizing Thesis with Hooks

Using hooks, you can embed HTML tags or php functions in the Thesis template wherever you wish them to execute. Following are two easy hooks to get you started. The first removes the navigation menu that appears above the header. The second adds the navigation menu below the header. You simply add these statements at the end of your custom_functions.php file.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

In the example above, the hooks merely move an existing function (one that’s built into the Thesis theme) from one place to another.

You can create your own functions with HTML tags or php. Following is a function I created to replace the footer text with my own footer text:

function my_footer() {
echo '<p>Copyright &copy; 2009 Joe Kraynak</p>';
}

remove_action('thesis_hook_footer', 'thesis_attribution');
add_action('thesis_hook_footer', 'my_footer');

Caution: You’re allowed to remove the Thesis footer attribution only if you purchased the developer’s edition. If you purchased the single user version, you can still edit the footer, but be sure it includes the following attribution code:

<p>Get smart with the <a href="http://diythemes.com/thesis/">Thesis WordPress Theme</a> from DIYthemes.</p>

With the Thesis OpenHook plugin, the process is even easier. You don’t have to deal with all that function stuff. You can disable built-in functions by clicking an option to remove them and add functions by pasting the HTML or php code in the appropriate text box, as shown below.

The Thesis OpenHook plugin simplifies the process of configuring the Thesis theme.

Adding a Header Image

You can add a header image in place of or in addition to the header and tagline text that appear at the top of your blog, and you can do it either by editing the custom.css file or through the use of hooks. The following sections show an example of each method.

Adding a Header Image with CSS

You can add a header image to your blog by editing your CSS file with or without the Thesis OpenHook plugin. Thesis guru Rick Beckman developed css specifically for this purpose. I don’t use a header image on this blog, but I have done so on both ComputerChimp.com and Slampapi.com/blog. In both cases, the graphics contain the blog title, so I wanted to hide the title and tagline that the blog inserts in the header. This code did the trick.

Before you begin:

1. Upload the graphic you want to use and note its address – such as http://www.sample.com/images/example.jpg.
2. On your WordPress dashboard, choose Appearance, Thesis Options, click the plus sign under Display Options next to Header and make sure Show site name in header and Show tagline in header are both checked. Otherwise, your header area will be blank – no text and no header image.
3. Paste the following into your custom.css file. Be sure to edit the code to include the correct dimensions and location and name of the image you want to use.

/* 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 url of your image to reflect the actual header's location and file name */
.custom #header #logo a { display: block; height: 125px; width: 875px; background: url('http://computerchimp.com/logos/computerchimp_3.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; }

Adding a Header Image with Hooks

Sugarrae has a good tutorial on using hooks that includes code for adding a header image with hooks. I modified the code slightly to avoid the use of backslashes. Again, replace any text and settings specific to my blog with text and settings specific to your blog.

/* Custom Header Image */
function add_header_image () {
echo '<a href="http://www.computerchimp.com/" title="ComputerChimp.com">
<img src="http://computerchimp.com/logos/computerchimp_3.jpg" alt="ComputerChimp" height="125" width="875" style="border:0px" />
</a>';
}

add_action('thesis_hook_after_title', 'add_header_image');

Note: If you’re using the Thesis OpenHook plugin, you simply add the HTML portion as shown below in the Header box.

You can insert the HTML code for your header image with OpenHook.

You can click the Remove Thesis default header option to remove the blog title and tagline. Otherwise, the title and tagline will appear below your header image. If you prefer leaving the default header in place but simply want to hide the text, add the following to your custom.css file:

.custom #header #logo { display: none; }
.custom #header #tagline { display: none; }

/* Optional to remove space around header image so image sits on divider line */
.custom #header { padding: 0; }

This hooks option inserts the header image fine, but it doesn’t insert it as a background image like the css method. If you want the blog title and tagline to appear in front of the header image, you’ll need to make some additional adjustments.

Adding the Pixopoint Multi-Level Navigation Menu

One last customization I want to discuss. Instead of the navigation bar that Thesis displays above or below the header area, I wanted to use a drop-down menu for this blog. I found a nifty plugin called Multi-Level Navigation Menu from PixoPoint and installed it. The instructions call for adding the following php function wherever you want the dropdown menu bar to appear (usually in the header.php file).

<?php if (function_exists('pixopoint_menu')) { pixopoint_menu(); } ?>

Important
If you used hooks to move the Thesis navbar from above the header to below the header earlier, remove those hooks before proceeding. Otherwise, you’re likely to end up with the Thesis navigation bar and the multi-level navigation menu.

Well, I knew that editing the header.php file was a big no-no in Thesis, so I would have to either use hooks in the custom_functions.php file or add the code using Thesis OpenHook. Let’s look at the easy way first. With OpenHook, you scroll down to the Before Header box and click the Remove Thesis nav menu option. Then, scroll down to the After Header box and paste in the code as shown below. Be sure to click the Execute PHP on this hook option. Click the save button, and you should be good to go.

Adding the Multi-Level Navigation Menu is a snap with OpenHook.

The other option is to edit the custom_functions.php file; simply insert the following at the end of the file.

function my_nav_menu() { ?>
<?php if (function_exists('pixopoint_menu')) { pixopoint_menu(); } ?>
<?php
}

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'my_nav_menu');

After getting the menu bar to display, I made some additional tweaks to its design using the PixoPoint Multi-Level Menu Navigation CSS Generator and making some additional adjustments to its stylesheet. (Yes, the menu bar has its own CSS stylesheet that controls the menu’s appearance.)

Tagged as: Thesis Theme, WordPress