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.
This post was updated on January 21, 2009 to reflect changes in the way the wp_enqueue_script tag is used in WordPress 2.6 and above.
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
function.phpfile. (WordPress 2.6 +)
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>
(UPDATED) To load jQuery in WordPress 2.6+ enter this code in your function.php file between <?php and ?>:
wp_enqueue_script('jquery');
If you are using WordPress 2.5x or below, you would put this code in your header.php file between the opening and closing head tags.
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:
In your functions.php file, copy the code:
wp_enqueue_script('jquery');
Then in your header.php file or custom javascript file, copy this code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a.hello").click(function() {
alert("Hello world!");
});
});
</script>
And wherever applicable in the body of your page:
<a class="hello" href="#">Click Me</a>
Thanks to John Why for his comments and help figuring out that the enqueue_script tag needed to be placed in the function.php file for WordPress 2.6 and above.
I am available for freelance web design and development, including Wordpress customization and jQuery enhancement. Contact Me
13 Comments
Thanks for posting this, I've been having problems getting a JQuery fade effect to work on a CSS menu I'm using. In fact, I'm having problems getting JQuery to work at all, including the "hello world" alert example you've included.
I'm working on a Mac using MAMP to do my testing.
I've included the code snippet in case you can see any errors -
jQuery(function() {// set opacity to nill on page load
jQuery("ul#menu span").css("opacity","0");
// on mouse over
jQuery("ul#menu span").hover(function () {
// animate opacity to full
jQuery(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
jQuery(this).stop().animate({
opacity: 0
}, 'slow');
});
});
Any advice appreciated,
Martin
[Reply]
iPaul Pro Reply:
January 21st, 2009 at 6:26 pm
Martin, I'm sorry for not getting back to you sooner. I hope you have resolved your issues. Unfortunately, some of the information in the article was outdated and incorrect.
If you have not already found it, check into the jQuery fadeIn and fadeOut effects.
If you still need assistance, please re-read this updated article and feel free to comment here again.
Thanks
- Paul
[Reply]
Hi Joe,
I have been working to try and get a rounded corners jquery script to work in my template for hours with absolutely NO luck! I just tried to use your click me example from above in my theme as well as several others and it does not work. I copied what you have exactly. I am running WP 2.7.
Any ideas?
[Reply]
iPaul Pro Reply:
January 22nd, 2009 at 4:17 pm
Hey Jeff,
Sorry for the delay. If you're still having trouble, please re-read the article and example, as I have made changes that should help.
[Reply]
I really very liked this post. Can I copy it to my blog?
Thank in advance.
Sincerely, Timur Alhimenkov.
[Reply]
iPaul Pro Reply:
January 21st, 2009 at 6:28 pm
Thanks Timur!
The post has been updated. Feel free to copy any information here.
[Reply]
your recap is a little confusing, because you run together some script which is supposed to go into the header (enqueue) with script which is supposed to go into the body, and i cannot tell where the header part ends and the body part begins. does the
.readypart go in the header or the body?thanks
[Reply]
johny why Reply:
January 13th, 2009 at 4:58 pm
i tried it both ways-- still no joy. using wp 2.7
[Reply]
johny why Reply:
January 13th, 2009 at 5:01 pm
SOLUTION-- the enqueue function needs to go into functions.php, not header.php. at least that's what worked for me.
[Reply]
@john why
Thanks for your interest and for taking the time to correct my mistakes. It appears that with WordPress 2.6 and above the
wp_enqueue_scripttag must indeed go in thefuntions.phpfile and notheader.php. I have updated the article accordingly. I also re arranged my "recap", as per your suggestions.Thanks again,
- Paul
[Reply]
Rather than include the javascript within your main PHP file, include it in an external .js file http://www.reynoldsftw.com/2009/01/wordpress-plugins-implementing-jquery-tutorial/
[Reply]
iPaul Pro Reply:
January 27th, 2009 at 11:30 am
Although both will work, you are right: one should create a custom external .js file, rather than including inline code. In this article, I mention the choice on where to include the jQuery code.
Thanks
[Reply]
Wow Article , I considered it phenomenal
I look forward to more innovative postings like this one. Does This Blog have a subscription I can subscribe to for new postings?
[Reply]