Merit.oryo.us

As I have recently gotten into the Wordpress Template biz, I though I would share a few tips that I use to develop more robust themes.

1. Test, test test

Yes the dark days of box model hacks and the like are gone for the most part, but it is still wise to test your theme on a number of browsers and platforms. Differences can and do occur, especially if there is an error with your code.

I’ve found the best way to do this is to use Browsershots. All you have to do is point their service to your URL and you’ll have access to around 50 browser/OS combinations. Its free and hard to beat. Just be aware of the 150 screen shot limit per domain per day.

Another great service for testing your theme on IE is NetRenderer. It, too, is a free service but you’re limited to just the top part of the page with this service.

Validate Your HTML and CSS

The reasoning behind validation is two fold. First, since your are potentially making a production that others will use, be professional. Send out an error free product. Validating can be a great tool to tracking down errors in code and css. Second, code that doesn’t validate doesn’t always degrade nicely in all browsers. It’s true that most browsers will render your theme in more or less the same way if the code is valid but if its not, you’re more likely to get unpredictable results. If you validate your code, it’s less likely to surprise you later.

Degrade Nicely

If a part of your theme works in tandem with a plugin, make sure it will work and look decent even if it is not installed. This can be done easily by checking if the plugin’s function is defined.

<?php if(function_exists('similiar_posts')) : ?>
  <!-- some code to spit out similar posts here -->
 
<?php endif;?>

Doing so will make sure users don’t come across error messages for missing functions.

Use a Standard Width

Few folks are fortunate enough to have a 22″ wide screen monitor. Therefore, limit the content portion of your theme to 1024px; If nothing else, make sure it gracefully degrade to some usable state if the width is less than that. You should also consider setting a minimum width. That can easily be done with css.

#post {
  min-width: 1024px;
}

Concessions For Those Using A Less Than Modern Day Browser

I’m not sure what percentage of users still use something less than IE7 but you may want to at least consider those using IE6. Personally, I wouldn’t spend much time perfecting the appearance of your theme in IE6 but again, we want something that will degrade nicely. The main drawback with IE6 was its lack of native support for transparent PNGs. With that in mind, you might have to check for those in your layout. I option would be to use the following snippet of code in your header.

<!--[if lte IE 6]>
<style type="text/css" media="screen">
body { 
  width: expression((document.body.clientWidth < 1024) ? '1024px' : 'auto'); 
}
#header { background: none;}
#content-wrapper { background: none;}
#sidebar { background: #424242; }
</style>
<![endif]-->

With a conditional comment like this, you can avoid using transparent PNGs for backgrounds in IE6. Also note the first portion which handles the minimum width of the page as IE6 doesn’t play well with min-width:.