Wordpress: Loading Multiple Scripts with Enqueue

WordPress: Loading multiple scripts with enqueue

First thing jquery in there by default in wordpress so you dont have to register it , just enqueue it

most of the jquery ui libs and core jquery files are already registered with wordpress so you only need to enqueue with right handle look here enqueue script

wp_enqueue_script is used to enqueue script and wp_enqueue_style is used to enqueue style

for calling custom js, its better to register script or style first before using

wp_register_script // to register script

wp_register_style // To register style

then enqueue using wp_enqueue_script, wp_enqueue_style

here is a sample code snippet for whole process from my site

function pr_scripts_styles() {

    wp_enqueue_script('jquery'); // just enqueue as its already registered 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

    /*   REGISTER ALL JS FOR SITE */
    wp_register_script('pr_cycle_all',get_stylesheet_directory_uri().'/js/pr-slider.js');
    wp_register_script('pr_slider',get_stylesheet_directory_uri().'/js/jquery.cycle.all.min.js');
    wp_register_script('pr_validation_engine',get_stylesheet_directory_uri().'/js/jquery.validationEngine-en.js');
    wp_register_script('pr_validation_locale',get_stylesheet_directory_uri().'/js/jquery.validationEngine.js');
    wp_register_script('stylethemes',get_stylesheet_directory_uri().'/js/stylethemes.js');
    wp_register_script('pr-jquery-ui',get_stylesheet_directory_uri().'/js/jquery-ui.js');
    wp_register_script('main-js',get_stylesheet_directory_uri().'/js/main.js');
    wp_register_script('pr-galleriffic',get_stylesheet_directory_uri().'/js/jquery.galleriffic.js');
    wp_register_script('pr-rollover',get_stylesheet_directory_uri().'/js/jquery.opacityrollover.js');
    wp_register_script('pr_colorbox',get_stylesheet_directory_uri().'/js/jquery.colorbox.js');
    wp_register_script('pr_jcarousel_js',get_stylesheet_directory_uri().'/js/jquery.jcarousel.min.js');

    //wp_register_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false');

    /*   REGISTER ALL CSS FOR SITE */
    wp_register_style('pr_woocommerce',get_stylesheet_directory_uri().'/css/_woocommerce.css');
    wp_register_style('pr_mobile',get_stylesheet_directory_uri().'/css/mobile.css');
    wp_register_style('pr_sec_teal_grey',get_stylesheet_directory_uri().'/css/secondary-teal-grey.css');
    wp_register_style('pr_site_options',get_stylesheet_directory_uri().'/css/site-options.css');
    wp_register_style('pr_teal_grey',get_stylesheet_directory_uri().'/css/teal-grey.css');
    wp_register_style('validation_css',get_stylesheet_directory_uri().'/css/validationEngine.jquery.css');
    wp_register_style('galleriffic_css',get_stylesheet_directory_uri().'/css/galleriffic.css');
    wp_register_style('pr_colorbox_style',get_stylesheet_directory_uri().'/css/colorbox.css');
    wp_register_style('pr_jcarousel_css',get_stylesheet_directory_uri().'/css/jcarouselskin.css');

    /*   CALL ALL CSS AND SCRIPTS FOR SITE */
    wp_enqueue_script('pr-jquery-ui');
    wp_enqueue_script('stylethemes');

    wp_enqueue_script('pr_cycle_all');

    wp_enqueue_script('pr_slider','','','',true);
    wp_enqueue_script('pr_validation_engine');
    wp_enqueue_script('pr_validation_locale');
    wp_enqueue_script('google-map-api');
    wp_enqueue_script('main-js');
    wp_enqueue_script('pr-galleriffic');
    wp_enqueue_script('pr-rollover');
    wp_enqueue_script('pr_colorbox');

    wp_enqueue_style( 'pr-style', get_stylesheet_uri(), array(), '2013-07-18' );
    wp_enqueue_style('pr_site_options');
    wp_enqueue_style('pr_woocommerce');
    wp_enqueue_style('pr_mobile');
    wp_enqueue_style('pr_sec_teal_grey');
    wp_enqueue_style('pr_teal_grey');
    wp_enqueue_style('validation_css');
    wp_enqueue_style('galleriffic_css');
    wp_enqueue_style('pr_colorbox_style');
    if(is_single()){
        wp_enqueue_script('pr_jcarousel_js');
        wp_enqueue_style('pr_jcarousel_css');
    }
}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

also remember to hook your function with wp_enqueue_scripts so that scripts & style load correctly add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

wp_enqueue_script() not loading multiple scripts

Why don´t you try to put all your functions inside a main function, like this?

function wpEnqueueScripts(){
    // Adds the new bootstrap function to the wp_enqueue_scripts
    wp_register_script('custom-script', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap.js', array('jquery'));
    wp_enqueue_script('custom-script');

    // Adds the new bootstrap function to the wp_enqueue_scripts
    wp_register_script('myscript', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap-carousel.js', array('jquery'));
    wp_enqueue_script('myscript');
}    

add_action('wp_enqueue_scripts', 'wpEnqueueScripts');

How to enqueue multiple css and js files on Wordpress for different pages based on the is_page() conditional tag?

You can actually make your script like this :

<?php
function custom_scripts_method() {
    wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), '1', 'all' );
    wp_register_style( 'second-custom-style', get_stylesheet_directory_uri() . '/css/second-custom-style.css', array(), '1', 'all' );
    wp_register_style( 'third-custom-style', get_stylesheet_directory_uri() . '/css/niceforms/third-custom-style.css', array(), '1', 'all' );

    wp_register_script('custom-script', get_template_directory_uri().'/js/custom-script.js', array('jquery'), '', TRUE);
    wp_register_script('second-custom-script', get_template_directory_uri().'/js/second-custom-script.js', array('jquery'), '', TRUE);

    if ( is_page('8')) {
        wp_enqueue_style('custom-style');
        wp_enqueue_style( 'second-custom-style' );

        wp_enqueue_script('custom-script');
    }
}

add_action( 'wp_enqueue_scripts', 'custom_scripts_method' );
?>

wp_enqueue_scripts accepts both css and jquery enqueue.

Cheers!

How to add multiple script on functions.php in wordpress child theme?

Try This Line of Code:

function enqueue_our_required_stylesheets(){
   wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/assets/css/font-awesome.min.css'); 
   wp_enqueue_script( 'script-all', get_stylesheet_directory_uri() . '/assets/js/all-script.js');
   wp_dequeue_script( 'jquery' );
   wp_enqueue_script( 'script-jquery', get_stylesheet_directory_uri() . '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js');
   wp_enqueue_script( 'script-1', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-1.js');
   wp_enqueue_script( 'script-2', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-2.js');
   wp_enqueue_script( 'script-3', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-3.js');
   wp_enqueue_script( 'script-4', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-4.js');
   wp_enqueue_script( 'script-5', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-5.js');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Wordpress plugin development - Load the enqueued files only where we need them

admin_enqueue_scripts passes a page hook to the callback function.
So, you can do something like this,

function ds_shortcodes_enqueue($hook) {
    if($hook != 'page_where_you_want_scripts') {
        return;
    }
    wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );
    wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );

Reference

---

Related Topics