Imagine this scenario, you find a really cool snippet of code on one of the many WordPress tutorial sites out there and paste it in your theme’s functions.php file.

The code snippet works as advertised, and you then release your theme for sale on a well-known theme marketplace. Let’s pick a random one out of a hat and go with… ThemeForest.

Suddenly your theme becomes really popular, may be because of the massive list of apparently useful “features” you have listed on your theme’s sales page. With your theme’s success, also comes a number of support queries, mostly to do with plugins breaking while using your theme.

How did this happen, you wonder? Maybe it’s because you blindly pasted random globs of WordPress code into your functions.php file without actually thinking about or anticipating any potential compatibility issues.

A Real Life Example

So, I was trying to find a snippet of code that would pull all the attached images from a post and then display them on that post automatically. I eventually found a piece of code on Stack Overflow, pasted it in my functions file, and it appeared to solve the problem.

The first line of code was the following:

add_filter('the_content', 'strip_shortcodes');

Oh well, it worked, I didn’t think anything of it. I later tried to embed a contact form with a shortcode. Surprise, it didn’t work and I spent about an hour trying to figure out why. If I actually read through the code I was pasting, I would’ve known.

This was for a client site, not a released theme, so luckily I didn’t have to deal with a deluge of support queries due to my stupid mistake.

What Commercial Plugin Developers Think

Here’s a quote from Carl Hancock (developer of Gravity Forms) on this very topic:

Supporting the popular Gravity Forms plugin means we see more than our fair share of poorly coded themes. One of the primary support related issues we run into are themes that aren’t developed using best practices, which results in Gravity Forms styling issues and in some cases conflicts that result in Gravity Forms not functioning properly.

The biggest culprit in these situations are themes that include code snippets copy-n-pasted from tutorial sites. Theme developers seem to think that just because the code snippet was on a tutorial site, it must be good. Unfortunately that isn’t always the case and these poor decisions result in headaches and support issues for users.

Want to limit the potential for running into issues with plugins caused by a poorly developed theme? Stick to reputable theme developers such as Press75, iThemes, Headway Themes, Organic Themes, WooThemes, and StudioPress to name a few. Be weary of theme marketplaces where the experience and skill set of the author may be lacking. In most cases you get what you pay for.

Coding Best Practices

A lot of these issues can likely be avoided by following WordPress coding standards. For example, you should be prefixing your function names to avoid any potential conflicts.

In the case of styling issues with Gravity Forms, you may want to avoid certain blanket styles on form and input elements, and instead use WordPress default ID selectors for the bulk of your form stylings.

These includes #searchform, #s, #searchsubmit in the search box. Also #commentform #author, #url, #email, #comment, #submit for the comment form.

Conclusion

If you’re a theme developer, and not too well-versed at PHP, be careful when copying and pasting these code snippets into your theme. Even if you’re not that great at PHP, you can at least read through the code and try to make some sense of it before using it.

Like if you find that your shortcodes aren’t functioning properly, a line of code that mentions “strip_shortcodes” might have something to do with that.

Sometimes I get the feeling that WordPress theme developers just paste random snippets in their functions.php file, just so they can list another “feature” on their theme’s sales pages.

While I’m not a big fan of this sort of idea, it gets into a whole other argument on the role of themes and plugins on WordPress sites, which I’ll save for a future post.

Related posts:

1. Remove Unnecessary Code from wp_head
2. WordPress Weekend Resources – June 5, 2009
3. Stop Downloading WordPress Themes from Shady Sites

Michael Soriano of Fearless Flyer recently released a free PSD template called “Your Blazing App.” Like my Corporate Blue release (also designed by Soriano), I’ve also coded this one into XHTML/CSS for free download.

Description

Like the Corporate Blue template, this layout consists of just a homepage. It’s designed for phone-related app website, but can be customized into a lot of other different uses. Here’s a description from the release page:

The layout itself is very modern. The page is housed in a beautiful etched container with very subtle textures. The large feature section showcases the “Apps” main message with large “call to action” buttons to get the viewers to instantly join.

There’s a blue ribbon separating the main section and the latest posts / sidebar. I imagined this to be an expanding area for categories and what not. Typically a little javascript should do this trick. The rest is pretty conventional, icons, typography, grid spacing and pixel perfect alignment.

I didn’t actually code the Javacsript part of the blue ribbon to make it expand, although the “Click here to expand” link is styled as a link so it shouldn’t be too difficult to integrate whatever Javascript you want.

Twitter Widget Compatible

I coded the Twitter list on the sidebar to easily integrate with their Javascript Twitter feed. I wrote more about this on my custom Twitter widget tutorial

With this template, pretty much all you have to do is place the following code at the end of your document (just before the closing body tag). Of course, you’ll have to replace the USERNAME with your actual Twitter username.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

You’ll also want to empty out the sample content in there so it says something like the following:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

Want More HTML Templates?

I know Theme Lab is primarily known for WordPress themes, but I want to gauge interest to see if you’re interested in just XHTML/CSS templates. Would you be interested in more?

There are plenty of resources nowadays to get free PSD layouts, which means many potential coded templates here in the future.

I think examining the code of these (in my opinion, although I’m a little biased since I coded them) cleanly coded templates could in turn improve your overall WordPress coding skills. HTML and CSS is a major part of that.

Conclusion

I’d love to hear your thoughts in the comments. Oh and thanks once again to Michael of Fearless Flyer for designing the actual template!

Related posts:

1. Corporate Blue – Free XHTML/CSS Template
2. Are you a free CSS template designer?
3. Bravissimo – Free PSD + XHTML/CSS Template

Live Demo | Download [ 2 ]

Live Demo | Download [ 5 ]

Live Demo | Download [ 5 ]