J.F. Designs

Are you new to Wordpress and want to put some jQuery or another script file on a page? Ever try to find a site that gives you an answer that actually works? Man, I had a tough time getting an answer on this one, but the solution was so simple! Go figure! Since it was so easy, I’ll post what I did here, that way you don’t have to go sifting through the forums and other posts around the net. This will focus on incorporating jQuery into your Wordpress themes, since that is the flavor of the week for me. One of the neat things about Wordpress is that is has a ton of libraries already built in, jQuery is among those built in, so you don’t have to worry about referencing that “jquery.js” file like you normally do! WooHoo!!

So how do you do this you might ask? Like I said earlier, it’s very simple…here’s how:

Functions.php

Ok, the first step is to set jQuery up. I’ve found the best place to do this is in the functions.php file in your themes folder. So, open it up, and put the following in:

<?php

add_action( 'wp_print_scripts', 'custom_add_javascript' );
function custom_add_javascript( ) {
    wp_enqueue_script( 'functions', '/wp-content/plugins/functions.js',
 array( 'jquery' ));

?>

Ok, so what did we do here? I’ll try to explain what we did one step at a time:

1. add_action('wp_print_scripts', 'custom_add_javascript' ); – We are using add action to do just that…add an action. We hook wp_print_scripts and the function we are adding in custom_add_javascript. You can name the function anything you would like because we reference it next.
2. function custom_add_javascript() – Here we create a function using the name that we declared in step one.
3. wp_enqueue_script( 'functions', '/wp-content/plugins/functions.js', array( 'jquery' )); – This is the powerhouse. The ‘wp_enqueue_script’ is a function you can use to safely add javascript files to a Wordpress generated page, so, that’s why we use it. The actual syntax is: <?php wp_enqueue_script( 'handle', 'src', 'deps', 'ver'); ?> where:
   • handle – (string) Name of the script. Lowercase string.
   • src – (string) (Optional) Path to the script from the root directory of WordPress. Example: “/wp-includes/js/scriptaculous/scriptaculous.js”. This parameter is only required when WordPress does not already know about this script. Defaults to false.
   • deps – (array) (Optional) Array of handles of any script that this script depends on; scripts that must be loaded before this script. false if there are no dependencies. This parameter is only required when WordPress does not already know about this script. Defaults to false.
   • ver – (string) (Optional) String specifying the script version number, if it has one. Defaults to false. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the script.

   So, from the example, I have my function.js file saved in ‘/wp-content/plugins’. Realistically, you could save that file anywhere is your blog file structure.

4. Lastly, there is array( 'jquery' )); attached to the end of the line. This is simply saying to load the jquery library script that already comes with Wordpress, since our functions.js is dependent on that. Like I said earlier, there are actually a ton of libraries that Wordpress has built in, so you could use those here also, or even in addition to: array('jquery','prototype', etc..));

Function.js

As for my what is in the script file you referenced, that is up to you. It helped to test things to make sure it was working for me first before I went crazy with scripts. So:

Jquery(document).ready(function(){
     alert("Testing 1...2...3");
});

Notice something very important? I used jQuery(document.ready(function(){ instead of that wonderful $ that we normally use with jQuery. I did this to avoid referencing any other global variables in other libraries that might be used and could cause a conflict. So, it’s really a safety precaution!!

Cheers,
Justin