How to include jQuery in a WordPress theme? - javascript

I am pretty new to WordPress and I am figuring out how to include jQuery into a theme.
I create the following function into functions.php theme:
function load_java_scripts() {
// Load FlexSlider JavaScript that handle the SlideShow:
wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
So I think that I can add it as some other JavaScript or CSS local resources but I am not sure about this method because in this case the jquery.js is not a local resource but is an online resource (is it the same thing?)
I also have some doubts because searching online I have found different methods to add jQuery to my theme, like this one.
Can you give me some information about how to correctly complete this task?

Is there any specific reason why you're not using the jQuery found in WordPress?
If you need to add your JavaScript file which depends on jQuery, you can add jQuery as a dependency.
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js', #your JS file
array( 'jquery' ) #dependencies
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
Note that WordPress loads jQuery in no conflict wrappers. so your code should be like:
jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
});

Since WP already comes with jQuery, I would simply load it for your theme, add it like this into your functions.php
function load_scripts(){
//Load scripts:
wp_enqueue_script('jquery'); # Loading the WordPress bundled jQuery version.
//may add more scripts to load like jquery-ui
}
add_action('wp_enqueue_scripts', 'load_scripts');
There are several ways to include jQuery into a theme. I always use WP bundled version which I find very simple.

In wordpress No need for Custom Jquery.
Add dependencies as 'jquery' it'll automatically get loaded.

try this,
<?php
function load_external_jQuery() {
wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery
$url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'; // the URL to check against
$test_url = #fopen($url,'r'); // test parameters
if( $test_url !== false ) { // test if the URL exists if exists then register the external file
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
}
else{// register the local file
wp_register_script('jquery', get_template_directory_uri().'/js/jquery.js', __FILE__, false, '1.7.2', true);
}
wp_enqueue_script('jquery'); // enqueue the jquery here
}
add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function
?>

You can use the methods below to include jQuery:
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'load-js-validate', 'foldername/jquery.js' );
Directly add in header file.<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
function js_scripts() {
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/example.js');
}
add_action( 'wp_enqueue_scripts', 'js_scripts' ); // add this in function file

Related

How to replace scripts in WordPress with the ones from CDN?

I am newbie of wordpress.
There are always some JS and Css from CDN in Wordpress, theme or plugins, like:
https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css
Unfortunately, those external CDNs resource are quite slow in our country, and will caused our site serious delay.
Is there anyway to replace it with a local server copy please?
How should I do it please?
Thanks in advance.
One solution you got in comments that how to load jQuery locally and in case you have any other scripts or styles which are not available locally by default from WordPress so you can use wp_enqueue_script.
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );`
Well you can always override your current themeto enqueue your css and js. Basically go to :
wordpress/wp-content/themes/(the theme your using)/functions.php
You will need to modify the "functions.php" file and add an action in order to enqueue your new scripes and styles.
function mynew_scripts() {
wp_enqueue_script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js');
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css');
//And for local file use get_template_directory_uri() to get the path
wp_enqueue_script('yourjsfile',get_template_directory_uri().'/yourthemedir/assets/js/yourjsfile.js');
wp_enqueue_style('yourcssfile',get_template_directory_uri().'/yourthemedir/assets/js/yourcssfile.css');
}
add_action('wp_enqueue_scripts', 'mynew_scripts');
check up these functions wp_enqueue_script , wp_enqueue_style

wordpress jquery version conflicts

In Wordpress use hook wp_enqueue_script to override jQuery version but it does not work.And i need both jquery.
I want to add new jquery version for website customization.
But when i add new version of jquery the old version of jquery functionally not working
function.php:
function themeslug_enqueue_script(){
wp_enqueue_script('child_theme_script_handle', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
array( 'jquery' ), '3.2.1', true );
wp_enqueue_script( 'my-great-script', get_stylesheet_directory_uri() . '/core/assets/js/multi-vendors.js',
array( 'jquery' ), '1.0', true );
}
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
jQuery.js:
$(document).ready(function(){
alert('Hello');
});
Some functionally is not working. For example, the slider.
You need to first de register you old version script and enqueue new the version.
Please use this code to change the jquery version.
<?php function modify_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.7.2');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery'); ?>
Thanks Every one to give suggestion.
I put my code in custom.js file and It's work.
There is no need to add new jquery.
Sorry to misguide you.

wordpress jquery is not responding as dependency

I have converted a html ecommerce template into woocommerce. but it is not working properly.the nivo slider and some other product is not working. maybe they are not finding wordpress jquery. although I enqueue custom jquery and other js file. here are the nivo slider js code below.
$(document).ready(function() {
$('#slideshow').nivoSlider();
}
);
its dependencies is jquery 1.7.1
First of all, if there's an issue with jQuery like $ is not defined then you need to use jQuery instead of $. Your new code will be
jQuery(document).ready(function($) {
$('#slideshow').nivoSlider();
}
Now, if you need a jQuery version other than the one WP uses. You can deregister and enqueue your specific jQuery again. Add this to your functions.php file
add_action( 'wp_enqueue_scripts', function(){
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'URL_OF_YOUR_NEW_JQUERY_FILE', array(), NULL, false );
wp_enqueue_script( 'jquery' );
});

wp_enqueue not working at all

I'm trying to create a wordpress theme and start learning the best way to include javascript and css files using wp_enqueue. After couple hours, I still can't load the files. Here is the code I use
function compro_scripts() {
wp_register_style( 'style', get_template_directory_uri() . '/css/materialize.css', array(), '20150208', 'all');
wp_enqueue_script( 'style' );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );
It looked simple on every tutorial I've read, but it still not work for me. Would anyone mind helping me solve this ?
This very basic knowledge of Wordpress, but as a newbie I found out this is pretty confusing. If you want to use the best practice to include javascript and css files make sure to add wp_head() and wp_footer(). The rest of it is described clearly here How to Load Javascript like Wordpress Master
You've registered the "style" handle with wp_register_style() and you're enqueuing it by using wp_enqueue_script() which is incorrect. wp_enqueue_script() in your code needs to be replaced by wp_enqueue_style(), since it's a style that you are including, not a script.
Alternatively, you can simply enqueue scripts and styles directly without the need to register them separately - like this
function compro_scripts() {
$template_dir = get_template_directory_uri();
//enqueue a style
wp_enqueue_style( 'style', $template_dir . '/css/materialize.css', array(), '20150208', 'all');
//enqueue a script
wp_enqueue_script( 'custom', $template_dir . '/js/custom.js', array( 'jquery' ), false, false );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );

Wordpress unSlider issue

I'm trying to get unlider.js working on Wordpress. My guess is that the registration of the script is not working properly.
I am using a child theme, and this is the code I put in functions.php to register the script (taken from WP guide).
Clearly, I am doing something wrong, perhaps the script is being inserted before jQuery.
What is the best way to attach a script from a child theme, after jQuery?
One I have so far is this:
<?php
add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts() {
wp_register_script(
'google-analytics',
get_stylesheet_directory_uri() . '/unslider.js',
array( 'jquery' ),
false,
'1.0',
true
);
wp_enqueue_script( 'google-analytics' );
}
?>

Categories