I'm trying to load jQuery and other scripts into the header (or should it be footer), and I have the jQuery working sort of I can get an alert box running.
The thing is, jquery-2.0.3.min.js
isn't loading, and I don't know if I'm doing the enqueue correctly. jquery-1.10.2 is loaded though. And also, the other script isn't loading either. For both scripts (2.0.3 and other script), this is at the end: ?ver=3.6.1
Also I was reading that it might be better load both into one function?
So, any help would be appreciated!
function load_jquery() {
wp_register_script( 'jquery_script', get_template_directory_uri() . 'js/jquery-2.0.3.min.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery_script' );
}
add_action( 'init', 'load_jquery' ); // end jQuery
function another() {
wp_register_script( 'another_script', get_template_directory_uri() . 'js/another.js', array( 'jquery' ) );
wp_enqueue_script( 'another_script' );
}
add_action( 'init', 'another' );
To enqueue scripts and styles in the front-end you'll need to use the wp_enqueue_scripts hook. Within the hooked function you can use the wp_register_script() , wp_enqueue_script() , wp_register_style() and wp_enqueue_style() functions.
wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.
By enqueueing, i.e. using the wp_enqueue_script and wp_enqueue_style functions, you inform WordPress when and where to load custom scripts and stylesheets. Simply put, instead of having all your code in one place, which would slow down your load time, you use the enqueue function.
To add the script in the footer or bottom of a WordPress page, all you need to do is set the $in_footer parameter to true . We have also used another function get_template_directory_uri() which returns the URL for the template directory.
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' );
This works for me when using child theme, just be sure to use different names for the scripts:
function my_scripts_method() {
wp_enqueue_script(
'script-name1',
get_stylesheet_directory_uri() . '/some-script.js',
array( 'jquery' )
);
wp_enqueue_script(
'script-name2',
get_stylesheet_directory_uri() . '/another-script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With