Become a T4L Fan Follow T4L on Twitter Subscribe to T4L Receive Email Updates

Troubleshooting Common Thesis Problems

This page is going to be a living document where I'll continue to add solutions to common problems (most of which I've experienced at one point or another...:) when working with Thesis. If you have any you'd like to add to the list, please send them along. Of course, I'll be happy to credit you and add a link back to your own site.

Problems with the Thesis Options Interface

The "cool shadow effect" doesn't show up
This checkbox in the Design Options > Body and Content Area section won't work if you have selected the Full-Width Framework. You can change to the Page Framework in the Framework Options panel of the same page.

Current and parent items in nav menu don't work
You can use the Design Options > Nav Menu panel to have your top-level menu items be a different color if you're on that page or one of its child pages. However, some people have reported it doesn't work unless they're using "pretty permalinks". That means that your page/post URLs will look like www.techforluddites.com/about-me instead of www.techforluddites.com/?page_id=2.

You can change your permalink structure through the WordPress dashboard using the Settings > Permalinks panel.

I also had a problem when I tried hosting my WordPress blog on Yahoo Small Business where the current page wasn't a problem, but it wasn't assigning parent classes. So, for example, if you had a tab named Products with dropdown items for Product 1, Product 2, etc., and you were on the Products page, the Products tab would change colors as specified. But if you were on the Product 1 page, the tab wouldn't change color properly.

Your site width isn't what you set it to be
In the Design Options > Layout panel, you can specify how many columns you have and how wide they are in pixels. So if you selected a 2-column format with the main column being 500 pixels and the sidebar being 350 pixels, you would probably expect your site to be 850 pixels wide. However, you would be wrong. These settings don't take into account any padding or border settings, so your actual site is going to be wider than 850 pixels.

I will write a full post about this at some point, because it's so bizarre to me. But, in the meantime, you can check out this article from the DIYthemes user's guide.

Using the Layout Constructor to Build and Tweak a 1, 2, or 3-column Design

Problems with the custom.css File

I'll be providing CSS examples in many of my posts but won't be trying to teach CSS from scratch. An excellent resource for learning how it works (or just for reminding yourself of what the correct property names are) is W3 Schools. In addition to explaining the concepts, it offers great "Try It!" examples where you can make changes on the fly and see what the effect is on the page.

The main problem people have with CSS is that you make a change to it and nothing happens. There are lots of different reasons this can happen; here are some of them.

  • Wrong selector. You're making changes to .menu and it really should be to ul.menu. One of the easiest ways to check this out is to apply a background color to the style definition so you can see exactly what section you're affecting. For example, if you're trying to style a widget and this is what you've got so far:

    .custom .widget#text-1 {
    padding-left: 10px;
    }

    To add a light gray background, you would make it:

    .custom .widget#text-1 {
    .padding-left: 10px;
    background-color: #cccccc;
    }
  • Not adding .custom to the definition. You don't always need to use .custom, but it's a good practice to use it because a lot of times you do. I honestly haven't figure out the rule, although the one exception I've found is when you're making changes to the core HTML elements like BODY as a whole—then you would not want to use .custom.
  • Syntax errors. I suspect this is one of the most common, if not the most common, problems that cause the CSS not to work right. Here are some things to check:
    • All open brackets must have a matching closed one.
    • Commas, colons, and semi-colons—very easy to accidentally type one instead of the other.
  • Shortcut properties. Some CSS selectors, like background, border, and font have multiple properties associated with them that you can define separately:

    .custom #sidebars {
    border-width: 3px;
    border-style: solid;
    border-color: #ccc;
    }

    You can also combine all these properties into a single border statement:

    .custom #sidebars {
    border: 3px solid #cccccc;
    }

    Note that when you combine all the properties together, the property name loses the part after the hyphen (width, style, color). The problem arises when you start defining a single property and then decide to add a different one, but forget to change border-width to just border, for example. I do this ALL the time...

  • Adding a space in the background-image property. The correct syntax for adding a background image is:

    background-image: url('http://www.techforluddites/images/XX.jpg');

    If you have a space between "url" and the opening bracket, the image won't show up.

  • Putting function code into the CSS file. While you can have CSS within your custom_functions.php file, the opposite does not hold true. If you have a PHP function or HTML code in your CSS file, you'll have problems with the way your styles display (if they display at all).

Problems with the custom_functions.php File

I've discovered I'm congenitally unable to write a custom function that works right on the first try, regardless of how simple it might be.

Syntax errors
Just like with CSS, correct syntax is essential. Unlike with CSS, where syntax errors usually just mean the style won't display properly, using the wrong kind of bracket in your custom_functions file can result in some REALLY ugly errors. So, again, make sure all open brackets have closing ones and check your punctuation marks.

Note: Wherever single quotes (') or double quotes (") appear, these must be plain-text quotes (also called dumb quotes). If you copy code from a program that uses curly/smart quotes (“ ”), you'll have to replace them with plain quotes. (I've set up this blog so if you copy the code from the rendered page, the quotes will paste in properly.)

Switching from PHP to HTML and back
You have to tell the program that you're doing this. PHP code begins with <?php and, when you're switching to HTML (or JavaScript or CSS or anything that is NOT PHP), you need to "turn off" the PHP with ?>. Then, when you've got PHP again, you have to turn it back on with <?php again. Shampoo, rinse, repeat.

Duplicate function names
I just ran into this one today. When I uploaded my file, my entire site went blank. It turns out I had two functions named custom_footer. I changed the name of one of them and, voila! All was well.