Writing a WordPress theme from scratch

When the basic theme framework was in place, I did a load of user testing. Validating the site using validator.w3.org was straightforward. I found out most of the xhtml markup was OK (although WordPress insists on putting paragraph tags in odd places, so I had to go through quite a few pages and take out unnecessary line breaks), but the css wouldn't validate.

I traced this back to the thickbox effect of the nextgen gallery plugin I use to display images - apparently it's not the fault of the plugin, rather the way the effect is coded, and affects many sites. There are workarounds but I didn't feel up to delving so deep into the code, so sadly the css currently doesn't validate.

One pitfall with developing a site in Firefox is that you don't see the often odd quirks of lesser browsers. I'm thinking of Internet Explorer here, naturally. Fortunately at work we have a standard installation of IE 6; normally I'd never touch this, but it's really useful for highlighting possible problems. For example: I wanted to use {text-indent:-10000px; font-size:0.001em; } for the header title and description, to replace the site name (in text) with the banner. IE didn't like this, so I had to include the code * html .header_title {margin-top:-10px;}. Thanks to a kindly colleague for some help there.

There are some JavaScript faults still in IE that I haven't been able to fix. I think they're caused by two plugins (Nextgen Gallery and Audio Player, I think) loading similar bits of code, but I'm not in any way a JavaScript expert.

Some plugins I tried out during the development process weren't up to scratch and had to go. So, Collapsible Archives and Collapsible Categories, which remained open as I browsed from page to page (apparently this is an intentional feature), had to go; in their place I used wp-dTree, which was much more elegant and user-friendly.

Once I'd uploaded the theme, I found a few problems I hadn't anticipated. My rss/Feedburner feed wouldn't validate and was broken. I eventually found out this was down to two things. Firstly, the Google search box I'd added caused some conflict, and so in the horizontal nav bar I swapped the search box with the rss icon. I understand that Google Adsense code can cause similar problems with feeds, and they should be moved further down in the markup.

The second feed problem was due to spaces in the functions.php file, and in the header. I got around this by removing all the line breaks from both, but it's something I could only test once I was up and running. Fortunately my site isn't massively popular, and I hope nobody noticed. However, it did mean that the following day my feed was republished in full, causing a dozen or so stories to be sent out to subscribers (all at once, thankfully).

The day after the relaunch, I was shocked to find that I only had 10 page impressions. Surely the relaunch couldn't have put people off so much? Thankfully no, it was merely that I'd forgotten to add the code , just before the tag (Google Analytics code can go there too). For good measure, to stop the odd smiley face that WP stats insists on sometimes showing, I added this to my css stylesheet too: img#wpstats{display:none}

Lastly, quite often a widget's settings will be saved to the previous theme, causing problems when switching designs.

Resetting them is easy: just add the code to the functions.php file. However, this will remove all text content and other settings, so make sure you've backed up before doing so. That's one reason why having a live test area can be helpful - you can exactly mirror the two sites, making it easier to reproduce settings if you need to.

Pages: 1 2 3

Leave a Reply