Of all the WordPress functions, I think wp_register_script, wp_register_style, wp_enqueue_script, and, wp_enqueue_style are the most elegant. It’s possible to get away with using only the wp_enqueue_* functions, but I prefer to use both for a little bit more control.

For the uninitiated, these functions allow you to add JavaScript and CSS files to the header (or footer, in later versions of WP) without running of the risk of another plugin adding the same file, that is, you avoid the following:

<script type="text/javascript" source="http://.../a-plugin/jQuery.js"></script>
<script type="text/javascript" source="http://.../a-plugin/plugin.js"></script>
<script type="text/javascript" source="http://.../my-theme/jQuery.js"></script>
<script type="text/javascript" source="http://.../my-theme/theme.js"></script>

If you develop themes or plugins for WordPress and are unaware of these functions, you should refer to the codex to get the low down on at least wp_enqueue_script, and wp_enqueue_style – these register and queue the files, the wp_register_* functions register the file ready to be queued for output.

The Rant

Despite the value these functions can add to themes and plugins, they are under-utilised in development. The functions have wider adoption in plug-in development, but it’s still well below 100%. In theme development adoption is virtually non-existent (at least in the themes I’ve used).

This failure to code properly is evenly spread across both free and paid themes. I?m happy to look the other way for free themes. After all, the motivation behind the theme may have been to learn WordPress development.

In commercial themes, particularly those above the US$30-$35 price point, it’s downright frustrating that these products haven’t been developed properly.

When someone purchases a theme, they shouldn’t have to debug the product to find out why a JavaScript framework is being included twice. The reason for the purchase is that they either don’t want to, or know how to, develop.

Avoiding costly mistakes

Evaluating a commercial theme on behalf of a client triggered this rant. At $195, it’s quite expensive in the world of WordPress. As I was viewing the source code of the online demo, I discovered the faux pas. We’ll advise against using that theme as a starting point. In fact, within short time we’d found a theme $195 cheaper that would do the job.

Looking at the source code of a demo site is usually enough to tell you how the theme is inserting its scripts:

  • Both <link> and <script> tags will use single quotes around attributes (‘), rather than double quotes (“),
  • CSS <link> tags will have an ID attribute ending in -css, eg: id=’shadowbox-css-css’, and,
  • JavaScript and CSS files include the version number as a query string eg jQuery.js?ver=1.3.2 (although a hook can be used to remove this)

Making sure that the wp_register_script, wp_register_style, wp_enqueue_script, and, wp_enqueue_style are included properly will save time, bandwidth and also avoid some detrimental conflicts.

About Peter Wilson

Peter Wilson is a Web developer based in Melbourne, Australia, and started making Websites in 1994.

Peter co-founded web production studio Soupgiant in 2009 and forms opinions on all things web at Big Red Tin.