Load multiple files using wp_enqueue_script in WordPress.

This article was written by in September 3, 2013, & may not be posted on other sites!
Original source url for this article: Load multiple files using wp_enqueue_script in WordPress.

How to load multiple javascript files using wp_enqueue_script in WordPress?
To use custom javascript or jQuery with WordPress, you should always use the wp_enqueue_script codex to enable one or multiple script files. Don’t just copy and paste script files into your <header> using <script> tags as you would in a clean html page. This could cost conflicts with WordPress plugins or theme functions. To load one or multiple javascript / jQuery files to WordPress, use the wp_enqueue_script codex instead.  This is how to:

  1. You should always work with a custom theme or a child theme i WordPress to avoid conflicts or even overwrites during updates.
  2. Open your functions.php or create one if you don’t have one. Put it in your WordPress themes folder.
  3. To add one custom or external javascript / jQuery file using wp_enqueue_script:
    <?php
    function my_init() {
    if (!is_admin()) {
    wp_deregister_script('jquery');

    // load the local copy of jQuery in the footer

    wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
    wp_enqueue_script('jquery');

    //load your own custom js

    wp_enqueue_script('my_script', 'your_path_url/custom-jquery.js', array('jquery'), '1.0', true);
    }
    }
    add_action('init', 'my_init');
    ?>
  4. To add multiple javascript or jQuery files to wordpress, using wp_enqueue_script:
    <?php
    function my_init() {
    if (!is_admin()) {
    wp_deregister_script('jquery');
    // load the local copy of jQuery in the footer
    wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
    wp_enqueue_script('jquery');//load your own custom js
    wp_enqueue_script('first_script', 'your_path_url/js01.js', array('jquery'), '1.0', true);
    wp_enqueue_script('second_script', 'your_path_url/js02.js', array('jquery'), '1.0', true);
    wp_enqueue_script('third_script', 'your_path_url/js03.js', array('jquery'), '1.0', true);
    }
    }
    add_action('init', 'my_init');
    ?>
  5. Make sure that the code > wp_enqueue_script (‘ second_script‘ … is unique for each new script.
  6. The “true” at the end of each wp_enqueue_script means that the script is loaded in the footer, this is also defalt in Worpress. If you want your script to load in the header, just change this to “false” instead.
  7. There is no need to load an external basic jQuery library in wordpress. WordPress has a local jQuery library which is loaded through this code:
    // load the local copy of the basic jQuery librabry in the footer
    wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
    wp_enqueue_script('jquery');

 

Load multiple files using wp_enqueue_script in WordPress.

Full code below, just copy and paste this into your functions.php. Make sure all the url paths are matching your js files paths.

<?php
function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery');

// load the local copy of jQuery in the footer
wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
wp_enqueue_script('jquery');


//load my own custom js
wp_enqueue_script('first_script', 'http://www.yoursite.com/first-jquery.js', array('jquery'), '1.0', true);
wp_enqueue_script('second_script', 'http://www.yoursite.com/second-jquery.js', array('jquery'), '1.0', true);
wp_enqueue_script('third_script', 'http://www.yoursite.com/third-jquery.js', array('jquery'), '1.0', true);
}
}
add_action('init', 'my_init');

?>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *