Using jQuery with WordPress
By Lisa, 
Apr 28th, 2009
If you’re a theme developer, you’ll (perhaps) be looking at keeping up with the latest in javascript/AJAX and incorporating a few tweaks into your brand new theme – in some ways, it’s been made very easy for you (and in one or two ways it’s just a little tricky…)
So, assuming you have a basic knowledge of PHP, theme design and javascript, here’s how it works:-
1. Loading up jQuery
WordPress 2.7 arrives with jQuery already bundled, so this bit’s easy enough. But we need to get it loaded onto the page, which doesn’t happen automatically…
Each and every WordPress theme should have a call to the function wp_head() included in it, usually the last thing in the <head> of a page before the <body> output begins, and therefore in header.php of your theme.
This function loads up all the necessary to get a WordPress page on the road – so this is the logical place to do it all, and to get the job done we can make use of the WordPress core function wp_enqueue_script().
<?php
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-tabs');
wp_head();
?>
In this code, we’ve first set up the jQuery library to be loaded – and secondly, we’ve done the same for a couple of user interface sublibraries, also bundled into WordPress as standard. The plan here would be to get some nice tabbed divisions going, maybe in the sidebar, courtesy of jQuery.
The libraries that come with WordPress are already registered with wp_enqueue_script, so you just use the handle, here: ‘jquery-ui-tabs’. The full list of bundled libraries is at: WordPress wp_enqueue_script.
If you want to add your own javascript library to your theme, you’ll need to declare the relative path – again, see the specification of wp_enqueue_script for details.
This applies similarly to the use of jQuery in plugins, or a theme configuration admin page, something like:
<?php
function init_method() {
wp_enqueue_script('jquery');
}
add_action('init', init_method);
?>
(One point to note here – the latest version of WordPress won’t necessarily have the latest version of jQuery bundled – shouldn’t be a problem, but just maybe if you’re planning something totally cutting-edge in terms of the javascript, it won’t be available to the unwashed mass of WordPress users just yet – nothing you can do about this…)
2. A Custom Script
Next step, get some javascript going, and in the standard fashion of jQuery, most likely you’ll want/need it as a (document).ready method.
<script type="text/javascript">
jQuery(document).ready(function($){
$(".post").addClass("grey");
});
</script>
This, for the example of it, is a very simple script that adds a class to all div.post in the code. And if you have a .grey class in your CSS you’ll be able to manipulate colours, backgrounds etc of posts. Not that you actually need jQuery to do all this, just for the purposes of the example…
Vital! – The snippets of jQuery code you’ll find while out and about on the net make extensive use of the shortcut $ to express the jQuery global object. This isn’t going to work in WordPress, so at all times we use jQuery(document).ready(function($) – and then it will work… Once inside the function, we can use $ as a shortcut.
The reason for this slight complication is that Prototype and Scriptaculous libraries arrived first into WordPress and have got to hold on to using the $ shortcut. And don’t be tempted to dabble with jQuery.noConflict() here – you won’t get good results.
3. Conclusion
And from here, since you know what you want to put in your theme in terms of flashy javascript/AJAX add-ons, I’ll leave you to get on with thieving some snippets and getting them up and running….
* Update – some of this information is superseded by changes in the way WordPress handles the loading of javascript – there’s a follow-up here – More about WordPress and jQuery
Tags: design, javascript, jquery
Hi
Hope you can help me
I am trying to have a floating div block. For that i Have done following:
In header.php (using jQuery):
$(document).ready(function()
{
$(window).scroll(function()
{
$(‘#globalnav’).animate({top:$(window).scrollTop()+”px” },{queue: false, duration: 350});
});
$(‘#close_message’).click(function()
{
//the messagebox gets scrool down with top property and gets hidden with zero opacity
$(‘#globalnav’).animate({ top:”+=15px”,opacity:0 }, “slow”);
});
});
Issue:
This works perfectly on the landing page of the blog but on the individual post page the same thing doesn’t work. It shows me the globalnav menu but it neither scrolls nor closes.
If it works on some urls and not others, it’s nearly always a problem with paths…
so this is my code
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
<link rel=”alternate” type=”application/atom+xml” title=” Atom Feed” href=”" />
<link rel=”pingback” href=”" />
jQuery(document).ready(function(){
$(‘.mainlinks li a’).click(function() {
$(‘.mainlinks li a’).removeClass(’selected’);
$(this).addClass(’selected’);
});
});
the im thinking the problem has to do with the order in which the code is loading. my script is before jquery is loaded. however i really don’t know.
I had it working not in wp but cannot get it working in wp… any ideas
Daniel’s last blog post..wow
ok that didn’t turn out so well. you have a filter on the code essentially making it unreadable…
php wp_enqueue_script( ‘jquery’ );
php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );
script type=”text/javascript”>
jQuery(document).ready(function(){
$(‘.mainlinks li a’).click(function() {
$(‘.mainlinks li a’).removeClass(’selected’);
$(this).addClass(’selected’);
});
});
</script
php wp_head();
that is the code with all the proper tags of course
From that code the js should be being output after the jQuery call – which, you’re right, it does need to be. You might try putting it in a file, and enqueuing it with a dependence on jQuery
Try putting this:
script type=”text/javascript”>
jQuery(document).ready(function(){
$(’.mainlinks li a’).click(function() {
$(’.mainlinks li a’).removeClass(’selected’);
$(this).addClass(’selected’);
});
});
after the php wp_head();
Hi…all
i am not femiliar with javascript
my client ask to impliment something like the following site
album pls visit desertgroup.ae/en/section/project-portfolio and move mouse on the image. any one can help me. thanks in advance
Thanks for this piece of info !
It helped me set up Ajaxify on my site. I posted a link here on the Ajaxify support page.
It also frees me up to experiment with jQuery elsewhere in the code.
I hope you keep up the good work – and a long and productive life for your site.
This post is extremely informative. I never knew that wordpress2.7+ came with jquery. However, after reading the post for 100 times i couldn’t figure out where exactly to put the “”
text to make it all work.
After putting it in my it added jquery but also doubled all the other meta links that i alleady had, upon load(not sure if that’s a good thing).
Please help.
Thanks for posting. Just got it to work much faster than I anticipated.
Hi there, I’m using jQuery to inject content into my index.php, in asynchronous mode.
The jQuery loaded .php file, lying in the same folder as index.php, makes a call to a function of an installed plugin.
Problem is I get a “call to undefined function” error, whilst if the same function call is made within index.php, it works.
I’m starting to believe that the loaded .php document with Jquery is done in such a way that Worpdress is tricked, so the function call fails. Could it be that executing a call to JQuery, will change the environemnt or the current folder?
Heres the code:
jQuery.noConflict();
jQuery(“#foo”).load(“/wp-content/themes/tgv1/topposts.php”);
At a guess, if it’s a WP function not existing, you’re not loading the WP environment into the ajax php script
require_once(PATH TO.’/wp-load.php’);
Hi,
I’m planning to use jQuery and jQuery UI in a theme I’m building (UI for the Admin pages). I’m using the entire package of the jQuery UI with all widgets and everything along with a custom theme.
If I enqueue my own versions of the script, won’t that conflict with those built into Wordpress?
Well, yes and no – there’d be no conflict if the theme doesn’t load the default versions – but then a separate plugin might…
Heey Thanks for this solution.
This really helped me out. Because I was stuck on a really simple fadeout thingie.
I never knew you could use something like a jquery.noconflict.
thanks again!!!!
Im having a jquery conflict on my feature content glider! The glider jquery is conflicting with photosmash galleries and lightbox-pro in wordpress.mu root page. can you help me
Thanks for the post! Now I can load my custom jQuery scripts.
many thanks – great tutorial!! worked on the first click – almost first time in my life!
[...] Great info for adding jquery [...]
Very helpful, thanks. I was struggling to make the “ready” function work.
[...] Using jQuery with WordPress | Themocracy WordPress Themes. Comments [...]
Thank you for this! Knowing that WordPress has jQuery built in makes my life a bit easier. Until I need to use something cutting-edge, that is…
Hi,
I like the way u have shown source code. I want to know that which plugin u have used to display the source code.
Thanks,
[...] Themocracy – Using jQuery with WordPress [...]