WordPress.org

Ready to get started?Download WordPress

Forums

Linking to Jquery the right way (7 posts)

  1. Preeminent
    Member
    Posted 3 years ago #

    Hey all,
    I'm sure this has been brought up a million times, but I can't really find a whole lot of detailed info on how to correctly call the main jquery library that ships with wordpress, and how to then call a jquery plugin or two.(not a wordpress plugin) I have seen the wp_enqueue_script() method and have tried it all over the place. In the header.php, in the footer.php, and in the functions.php file. Nothing will work for me. In my theme, I'm currently just linking directly to all jquery files that I need, since I can't get the right method to work. I would like to learn what I'm doing wrong. So am I to use the wp_enqueue_script method anywhere that I need the call jquery in my theme? I was reading that I should call it by getting it from the functions.php file?! I'm lost! I have this in my current theme's function.php file:
    if ( !is_admin() ) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
    wp_enqueue_script('jquery');
    }

    So how do I actually use that and call that from my header.php page?
    And then how would I link to a certain jquery plugin file that I need to also use? Which I would prefer to call from my footer.php file.

  2. CharlyLeetham
    Member
    Posted 3 years ago #

    Hi Preeminent,

    Try putting this in your theme functions.php file and use the add_action hook to call it.

    function add_google_jquery() {
       if ( !is_admin() ) {
          wp_deregister_script('jquery');
          wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
          wp_enqueue_script('jquery');
       }
    }
    add_action('wp_print_scripts ', 'add_google_jquery');

    Add action is a good thing to use in general, see http://codex.wordpress.org/Plugin_API/Action_Reference for a list of action hooks.

  3. Preeminent
    Member
    Posted 3 years ago #

    Thanks so much for you reply! But isn't that for wordpress plugin development? In my functions.php file, I basically have what you suggested above. I'll add the part about 'add_google_jquery' though. But where do I go from here? How do I call jquery itself and other jquery scripts from my header or footer files? Other than linking directly to the files, which I am currently doing.

  4. CharlyLeetham
    Member
    Posted 3 years ago #

    Hi Preeminent,

    Yes and No - Plugins are really a series of functions run in a specific order, or at specific times.

    With WordPress, you can add functions that you would normally run in a plugin from functions.php. Essentially, anything that is available for plugins, can be used in functions.php.

    The code I provided is to load JQuery from Google in your header. It can be called in a plugin, or it can be called directly from the functions.php file.

    The add_action on 'wp_print_scripts' will run all the commands in the function you define:
    http://codex.wordpress.org/Function_Reference/add_action

    The call of
    add_action('wp_print_scripts','add_google_jquery');

    Basically tells WordPress to run your function add_google_jquery just before WordPress prints registered JavaScript scripts into the page header (wp_print_scripts).

    The function itself uses the wordpress enqueue script function to make sure that jQuery is loaded properly.

    Once you have all the code in, jQuery will automatically be loaded when you site loads. (I made a small mod to the code below by removing the ( ) around the link to the google jquery).

    function add_google_jquery() {
       if ( !is_admin() ) {
          wp_deregister_script('jquery');
          wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js', false);
          wp_enqueue_script('jquery');
       }
    }
    add_action('wp_print_scripts ', 'add_google_jquery');

    It's worthwhile spending some time looking at the Action Reference for WordPress:
    http://codex.wordpress.org/Plugin_API/Action_Reference

    To load you scripts in the footer, you need to look at the wp_enqueue_script function:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Currently, the function above will load jQuery into the header.

    To load your script in the footer, you would use:

    function add_google_jquery() {
       if ( !is_admin() ) {
          wp_deregister_script('jquery');
          wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js',,'1.4.1',true);
       }
    }
    add_action('wp_print_scripts ', 'add_google_jquery');

    In the above example, I've removed the wp_register_script and done it all in the wp_enqueue_script function.

    I would recommend testing loading the function in your header first and then test the moving of the script to the footer.

    To test if this working, load your site without the function active. Check your page source and see what / where jquery is loaded - in most standard WP Themes, it's called from the wp-includes folder.

    Activate your function, load your site with the function activated and check the page source again. If the function is working correctly, you'll see jquery being loaded from the Google CDN.

    Charly

  5. Preeminent
    Member
    Posted 3 years ago #

    Wow! That is a very detailed reply. Thank you very much for taking your time to do that! I am going to come back tomorrow and slowly try and take all this in. Thanks again!

  6. Gregg Banse
    Member
    Posted 3 years ago #

    Hello,
    Yes, thank you for the informative thread!

    I have a somewhat related question. I'm trying to figure out how to move the script calls that plugins place in the header. Can I de-register them from the header and then call them in where I want them?

  7. Chris
    Member
    Posted 2 years ago #

    It is kind of silly that this isn't compatible with older versions of Jquery but whatever. If this helps anyone, I was able to fix this because I had an older plugin that was calling jquery and creating problems. If you have other plugins that are out of date those could also be the problem. Make sure all plugins are updated and if you are still having problems try viewing the source code and searcing for "jquery". You should only have on version of jquery loading.

Topic Closed

This topic has been closed to new replies.

About this Topic