Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Building my first theme from scratch in Wordpress 3.4.1, I know Wordpress already has the latest version of the JQuery via Google. I have read about issue's if the script is not called properly, so want to try and keep everything as close to the recommended coding as possibly. I want to make sure the script is loaded which I believe is carried out by the below PHP script in the functions.php file (taken from the Wordpress Codex).

<?php
function my_scripts_method() {
wp_enqueue_script( 'jquery' );
}

I want to basically have a custom menu using JQuery, so is it just a case of placing the script I want to activate in the header or PHP section?

Also if I wanted to enqueue another script that is not included in the Wordpress already, do I simply add the below PHP to the above code in the functions.php file?

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

I am ok with HTML and CSS but PHP and JAVA is relatively new to me, any help is greatly appreciated.

Thanks,

Ant

share|improve this question
    
possible duplicate of Where is the right place to register/enqueue scripts & styles –  Chris_O Jul 30 '12 at 12:29
add comment

2 Answers 2

up vote 1 down vote accepted

You're on the right track, but missing one piece:

add_action('wp_enqueue_scripts', 'my_scripts_method');

add_action allows you to run code at specific times during page loads / specific events. The above action tells WP to run your function when it is adding the scripts to the html head element. Your function in turn instructs WP to add the jQuery script.

The same goes for registering a new script, but with a different hook:

add_action('wp_enqueue_scripts', 'my_register_script_method');

function my_register_script_method () {
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

If you're overriding a pre-registered script, you should also first deregister that script. I use something like the following code to replace the jquery script (note: read 2nd edit at the end):

function my_register_script_method () {
    wp_deregister_script('jquery');
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

As to where you should put that code. If the code is specific to the theme, you should put it in functions.php in your theme folder. If you're going to re-use the code on multiple theme's, it would be easier to maintain a plugin with all shared code.

Edit: As Stephen Harris notes below, since WP 3.3 you can also use wp_enqueue_scripts after wp_head has triggered, for example in shortcodes or widgets. The js will then be loaded in the footer.

Edit 2: For jQuery and other google hosted libraries it is recommended that you use http://wordpress.org/extend/plugins/use-google-libraries/ Read the comments for a motivation by Otto.

share|improve this answer
    
W van Dam, great thank you very much for the lightning response and the information, will put this into practice. Just 1 theme at the moment (I don't want to run before I can even crawl) but interesting what you say about a plugin. Cheers Ant –  Ant Jul 29 '12 at 12:56
    
You're welcome. Amit adds a good point too. Any scripts you register you also need to enqueue. Another tip: If you only need jQuery on (a) specific page(s), use conditional tags, such as is_home(), to only load the script on those pages. This makes your site more efficient. It's probably not relevant for your current use case, but may be of use later. (Codex page: codex.wordpress.org/Conditional_Tags) –  W van Dam Jul 29 '12 at 13:02
    
Dam, this is good and will keep it in mind, I want to ensure the web site speed to still quick so makes sense what your saying. I just wish I could use some of the CSS3 transitions but IE lets me down on this and they are pretty easy to code. –  Ant Jul 29 '12 at 14:24
    
No problem. PS. Could you vote on or accept my answer? I'd like to add a comment to what Stephen Harris said above, but currently I'm still 1 vote removed from being allowed to comment on the answers of others. Stack exchange is great, but also annoying in some ways. –  W van Dam Jul 29 '12 at 14:44
2  
Please do not use that method to include the jQuery script from Google. The above doesn't work and will cause conflicts with other scripts, along with other issues. Use the "Use Google Libraries" plugin instead, if you want to use Google hosted versions of the libraries. This plugin does it right, and is updated often. The method above will only work superficially, it will cause problems down the line. –  Otto Jul 29 '12 at 15:57
show 6 more comments

You must use wp_enqueue_script to load the script for your theme, the function wp_register_script only register the script with a keyword.

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

This will simply regiter new script with name jqueryexample and you can load that script whenever necessary using wp_enqueue_script function.

Here is sample code to load already register script i.e. jQuery and a new own script i.e. jQuery Exmple

<?php
function wpse_60056_load_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
    wp_enqueue_script( 'jqueryexample' );

}    
add_action('wp_enqueue_scripts', 'wpse_60056_load_scripts');
?>

However you can use only the wp_enqueue_scripts function to load a remote JavaScript, Here is an example -

wp_enqueue_script('jqueryexample','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js'); 
share|improve this answer
    
Amit, thank you for this and missed this before, very much appreciated. –  Ant Jul 29 '12 at 13:24
4  
+1 Note since 3.3 you can use wp_enqueue_script inside shortcode/widget callbacks (or otherwise in the body of the page). This means you can register a script on the hook wp_enqueue_scripts and then only actually load it when it's needed. –  Stephen Harris Jul 29 '12 at 13:57
    
Useful to know guess this all comes down to optimisation of the web page, thanks Stephen. –  Ant Jul 29 '12 at 14:19
1  
When you load a script as Stephen Harris suggests, the scripts will be put in the footer. Keep this in mind when your script should be loaded before others. Also, if you actually want to force a script to be loaded into the footer, you can set the 5th argument of 'wp_enqueue_scripts' or 'wp_register_script' to true (Codex: codex.wordpress.org/Function_Reference/wp_enqueue_script). –  W van Dam Jul 29 '12 at 15:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.