Despite its slogan "write less, do more" jquery has definitely caused me no shortage of pain in implementing any of its cool effects. After plenty of struggle I think I have come up with a process that lets me apply just about any jquery plugin w/ minimal stress.
Here's my 3 step process:
1. Upload your Plugin
2. Load Libraries for Jquery and your plugin
3. Add the jquery script that calls your plugin, aka initialize your script
1. Upload your Plugin Script
In my child theme I usually have a folder called "js" where I dump all the jquery plugins I am using on a particular theme. It doesn't matter what you call it, it just has to been w/ your theme and you have to know its path relative to the style.css
2a. Load Jquery and 2b. Your Plugin Script's Library
jquery comes with wordpress and it is enqueued by default in the admin section, but NOT on the front end. you need to tell it to load. google also hosts jquery and I usually prefer to use this. I've read that it can be faster and doesn't use your own bandwidth, but who knows for sure. you also need to enqueue the script you uploaded in step 1.
function kia_enqueue_scripts() {
//use google's jquery
wp_deregister_script( 'jquery' );
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js');
//load up your own plugin
wp_enqueue_script('yourscript', get_stylesheet_directory_uri() . '/js/your-script-file.js');
}
add_action('wp_enqueue_scripts', 'kia_enqueue_scripts');edit: 6/19/2012. Edited because wordpress recommends enqueuing on the wp_enqueue_scripts hook and get_stylesheet_directory_uri() should replace get_bloginfo(). if you don't want to use google's jquery then just delete those 2 lines. lastly, wp_enqueue_scripts only runs on the front-end. if you need to load scripts in the backend for any reason you should use admin_enqueue_scripts() hook
i will also often use PHP constants to make my life easier. for instance at the top of your functions.php you could:
define('JS',get_stylesheet_directory_uri() .'/js') );now you can use JS across your entire theme to refer to a 'js' folder in your childtheme. get_bloginfo('stylesheet_directory'). this is just a touch neater (imho).
using a constant, you'd then adjust your enqueue script command to look like:
wp_enqueue_script('yourscript', JS . '/your-script-file.js');for more on enqueue script see the codex:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
3. Add Jquery that Calls (initializes) the Plugin
There is probably a better name for this, but it is the script that tells your site what to do. It is a common place for epic fails as jquery plugin developers often give their instructions for implementation in the jquery shorthand style of $, which doesn't work out of the box with wordpress. instead we have to play nice with WP, so I typically add my scripts in the following manner:
function my_in_head(){ ?>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function($) { //tells WP to recognize the $ variable
//paste your jquery code here
$('body').css('backgroundColor','red');
}); //end document ready functions
/* ]]> */
</script>
<?php }
add_action('wp_head', 'my_in_head');at this point, if your body's background turns red then you have configured jquery correctly. I know it might slow the site down to put all of this jquery in the header, but personally I'd rather have it work and be a touch slower than not work at all. Worry about that later.
Final Words on HTML Markup
Jquery works similarly to CSS in how items are selected. All the jquery plugins that I have encountered rely on specfic HTML markup. For instance the Jquery UI "tabs" plugin works with the following markup:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
Proin elit arcu.
</div>
<div id="tabs-2">
Morbi tincidunt.
</div>
<div id="tabs-3">
Mauris eleifend est et turpis.
</div>
</div>the jquery that goes in step 3 is then:
$( "#tabs" ).tabs();So if your container div is called "bacon" but you are calling the script on the #tabs selector isn't going to work. If you call the .tabs() command and you don't have the tabs.js script queued up properly, I know that firebug will give you an error message saying .tabs() isn't recognized, but I have yet to discover some sort of way to be alerted to this type of "name" error, so you just have to pay attention. if you copy and paste wholesale from the plugin's instructions, just make sure your markup matches!
hope this helps... and please advise of any errors.
