jQuery is an intuitive, light-weight JavaScript Library that has quickly become popular, mostly due to its ease of use. Amongst many other things, jQuery provides the ability to make website content dynamic without reloading a page.
Using jQuery with Wordpress affords many wonderful design and development opportunities. I thought I’d take the time to explain the steps necessary to start working with jQuery on a (self-hosted) Wordpress installation, as it is under-documented and potentially confusing.
The first thing to understand, when setting up jQuery, is that the actual library file must first be on the website’s server. Secondly, the jQuery file must be loaded on every page where the script is used.
The good news: 1) Wordpress comes with jQuery included, and 2) loading it requires only one line in your
header.phpfile.
So lets take a look at an example of a simple jQuery snippet (from the jQuery tutorials):
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.hello").click(function() {
alert("Hello world!");
});
});
</script>
</head>
<body>
<a class="hello" href="#">Click Me</a>
</body>
Just so you know, this code finds and anchors with the class “hello” and adds a click function, so that when clicked, and alert is shown containing the text “Hello world!” Like this:
Click Me
Let’s break it down.
This is normal the way to tell a browser to load the jQuery Library:
<script type="text/javascript" src="jquery.js"></script>
To load jQuery in Wordpress enter this code in your header.php file between the head open and close tags:
<?php wp_enqueue_script('jquery'); ?>
Because jQuery is included with Wordpress (its used in admin interface), there is no need to specify the location of the library file, instead, only a line to tell the browser to queue it up. In fact, one would use the wp_enqueue_script to load any JavaScript in Wordpress.
And now the tip that may save you hours of head-scratching.
There is one major/minor difference in the use of jQuery with Wordpress, as compared to static pages. Here’s the code that one would normally use:
$(document).ready(function() {
$("a.hello").click(function() {
alert("Hello world!");
});
});
So the only real difference with using jQuery in Wordpress is that instead of using a “$”, we use “jQuery”. The code above would end up looking like this:
jQuery(document).ready(function() {
jQuery("a.hello").click(function() {
alert("Hello world!");
});
});
Notice that the only difference between the two is that the “$” is replaced with “jQuery”.
Seems simple right? Well it is. The problem is, its under-documented. When I first started to dabble with jQuery, I was about ready to give up because nothing would work. It wasn’t until i came across this article that I learned this important information.
Just to recap, here is the code for implementing the jQuery “hello world” alert in Wordpress:
<?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript"><!--
jQuery(document).ready(function() {
jQuery("a.hello").click(function() {
alert("Hello world!");
});
});
// --></script>
<a class="hello" href="#">Click Me</a>
I am available for freelance web design and development, including Wordpress customization and jQuery enhancement. Contact Me
