Must read WordPress theme development tips from Carl Hancock

19 May 2011 comment icon0 | Categories: tips

Envato Founder Collis Ta’eed posted an excellent response to that other recent post over on WPCandy.

I think Collis and the Envato team are a really smart bunch and clearly understand the concerns expressed by the theme development community recently with regard to themeforest. What’s more they’re not just listening – they’re acting on it and responding with new initiatives like Envato Elite. I’m waiting for Collis to call any day now to tell me he’ll be flying me down to Melbourne 🙂

In his post, Collis referred to a tweet from Carl Hancock (developer of one of the best WordPress plugins around – Gravity Forms) and how Carl would going to invoice Envato every time he had to fix a bug with a Theme Forest theme (that was most likely being falsely reported as a Gravity Forms bug I’m guessing).

Carl – I hear ya.

There is nothing worse than having to crack open someone else’s WordPress theme to find a big steaming pile to poo staring back at you. And let’s be honest here – there are lots of crap themes floating around on the web. This is not just an themeforest issue. It’s a community wide problem. It’s also not limited to themes – plugins tend to be big offenders in this respect too.

With this in mind, Carl shared some really valuable tips for anyone developing WordPress themes in the comments of the Collis post and Carl kindly agreed for me to repost them here for you guys to benefit from. Any theme or plugin not following these principles will bite you in the ass at some point or another – believe you me.

So bookmark these tip folks or print them out and stick them to your forehead – whatever you need to do to make sure you obey ok!

Carl’s Pro Theme Development tips (so he doesn’t have to fix your themes in the future!)

ThemeForest accounts for no less than 85% of support issues we encounter caused by poorly developed themes.

I know Envato is taking steps to improve the quality of the code found in their themes. Requiring theme developers to properly enqueue their Javascript and CSS is one of the ways they are doing this, which is great. Here are two more things that would go a long way to limiting conflicts caused by ThemeForest themes.

ONLY ENQUEUE SCRIPTS WHEN NECESSARY, DON’T OUTPUT THEM IN THE ADMIN

By default when you enqueue Javascript using the WordPress enqueue function in your themes functions.php file, it’s going to be output on every single page. This includes the admin. Everywhere. This is bad. Very bad. Scripts and CSS should only be enqueued when it’s absolutely necessary.

Ideally these scripts would only be output when necessary, such as specific to a theme page template for instance. But at the very least the enqueue function call needs to be wrapped in an If statement to make sure it is NOT output within the admin.

If you need to output scripts in the Admin because your theme has theme option pages, then learn how to enqueue the scripts so they are only output on your theme option pages. You shouldn’t be outputting scripts on every Admin page. This is how conflicts are born.

If you are using Gravity Forms and you can login to your WordPress Dashboard, navigate to the Gravity Forms form editor, view source and you see scripts and CSS being output by the theme? It’s probably not following best practices when it comes to enqueuing scripts and CSS.

BE SPECIFIC WITH YOUR CSS TARGETING

Many themes include their own built in simple contact form. They style these forms using CSS. The problem is the CSS isn’t specific enough and it globally applies styles to Form elements such as Inputs, Labels, etc. Why is this a problem? Because they aren’t specific enough. They target ALL Labels, ALL Inputs, etc. They don’t wrap the Form in a container and then target only the Labels and Inputs in that container.

This means that when you globally target Inputs, Labels, etc. you better be sure the styles you are applying are generic enough that they aren’t going to cause problems with Plugins that may output form elements. The main content container is also not specific enough, because plugins such as Gravity Forms output code in the main content container.

So if you are targeting an element such as Labels and using CSS to float the Label, you may have just defined your styles in such a global way that it causes problems with Labels used in plugins like Gravity Forms… causing display issues for your users in the process. CSS Inheritance is both a blessing and a curse.

These are probably 2 of the most common problems found in themes that cause plugin conflicts.

Comments are open but no comments have been posted yet. Go ahead and post a comment and tell us what you think.

Leave a Reply