Home

Using jQuery and CoffeeScript in WordPress

The standard ready function doesn't always work in WordPress plugins. Here's a workaround.

If you're properly enqueuing scripts and styles into your WordPress plugins and themes, you may have noticed this doesn't work:

$(document).ready(function () {
alert($(".container").length);
});

jQuery

The solution, using jQuery, is this:

jQuery(document).ready(function ($) {
alert($(".container").length);
});

You have to pass the $ to the ready function before you can effectively use it.

CoffeeScript

The CoffeeScript equivalent to this is:

jQuery(document).ready ($) ->
alert $('.container').length;

Short, simple, but a frustration saver.

Let's Connect

Keep Reading

Animating Dots Using HTML5 Canvas

This builds on a previous example and brings some movement to our dots!

Feb 27, 2016

Create a Multi-Colored, Dotted Grid with HTML5 Canvas

The wide world of canvas is open-ended. Here's a fun example to dig in and learn some of the basics of HTML5 canvas.

Feb 26, 2016

ES6 Build Pipeline for Middleman using Gulp

Middleman has abandoned its asset pipeline in favor of a more flexible and customized approach. Let's use this new approach to get ES6 modules into our Middleman project.

Oct 16, 2018