I'm not sure if this is possible but I was hoping that I could retrieve WordPress' built-in jQuery version number programmatically via PHP.
I prefer to include a CDN version of jQuery using wp_register_script(), then I use the WordPress' built-in jQuery as a fallback.
The problem with using a CDN version is that if WordPress updates their built-in version of jquery, the CDN version might not match. So I was hoping to fetch the version number (maybe using wp_default_scripts()), and then pass that through to wp_register_script().
Any ideas on how I get do this?
I borrowed from WP jQuery Plus:
function hs_script_enqueuer() {
if( !is_admin() ) {
// Enqueue so we can grab the built-in version
wp_enqueue_script( 'jquery' );
// Get jquery handle - WP 3.6 or newer changed the jQuery handle (once we're on 3.6+ we can remove this logic)
$jquery_handle = (version_compare($wp_version, '3.6-alpha1', '>=') ) ? 'jquery-core' : 'jquery';
// Get the WP built-in version
$wp_jquery_ver = $GLOBALS['wp_scripts']->registered[$jquery_handle]->ver;
// Just in case it doesn't work, add a fallback version
$jquery_ver = ( $wp_jquery_ver == '' ) ? '1.8.3' : $wp_jquery_ver;
// De-register built-in jquery
wp_deregister_script('jquery');
// Register CDN version
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
// Enqueue new jquery
wp_enqueue_script( 'jquery' );
}
}
add_action( 'wp_enqueue_scripts', 'hs_script_enqueuer' );
// Add jquery fallback if CDN is unavailable
function jquery_fallback() {
echo '<script>window.jQuery || document.write(\'<script src="' . includes_url( 'js/jquery/jquery.js' ) . '"><\/script>\')</script>' . "\n";
}
add_action( 'wp_head', 'jquery_fallback' );
if( ! function_exists('register_jquery_script') ){
function register_jquery_script(){
/* Get jquery handle - WP 3.6 or newer changed the jQuery handle (once we're on 3.6+ we can remove this logic) */
$jquery_handle = (version_compare($wp_version, '3.6-alpha1', '>=') ) ? 'jquery-core' : 'jquery';
/* Get the WP built-in version */
$wp_jquery_ver = $GLOBALS['wp_scripts']->registered[$jquery_handle]->ver;
/* Just in case it doesn't work, add a fallback version */
$jquery_ver = ( $wp_jquery_ver == '' ) ? '1.8.3' : $wp_jquery_ver;
/* the URL to check CDN accessibility */
$url = 'http://ajax.googleapis.com/ajax/libs/jquery/' . $jquery_ver . '/jquery.min.js';
/* test CDN accessibility */
$test_url = wp_remote_fopen($url);
/* deregisters the default WordPress jQuery */
wp_enqueue_script( 'jquery' );
wp_deregister_script( 'jquery' );
/* if CDN available - load it */
if( $test_url !== false ) {
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js', false , false , true );
}
/* if CDN unavailable - load local jquery copy */
else{
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', __FILE__, false, false, true);
}
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts','register_jquery_script');
}
you must be sure that you loaded local jquery into the template_directory/js/ with name jquery.min.js
I'm loading all scripts in wp_footer() by default for page loading performance.
If you loading your js scripts in wp_header(), you will change the last true to false on lines:
wp_register_script( 'jquery' , $src , false , false , false );
Enjoy it!
Related
custom.css file load properly but after some changes in CSS file and send it on filezilla it does not load that current changes. It loads after remove functions.php file and again paste all data. What should I do to solve that problem. Below I have attached link file. I also write <?php wp-head() ?> in header and <?php wp-footer() ?> in footer file.
function wpdocs_theme_name_scripts() {
// style link
wp_enqueue_style ( 'bootstrap.min', get_template_directory_uri(). '/assets/css/bootstrap.min.css','1.1', true);
wp_enqueue_style ( 'swiper-bundle.min ', get_template_directory_uri(). '/assets/css/swiper-bundle.min.css','1.1', true);
wp_enqueue_style ( 'style css', get_stylesheet_uri() );
wp_enqueue_style ( 'custom css', get_bloginfo('template_directory'). '/custom.css','1.1', true);
// script link
wp_enqueue_script ( 'jquery-3.5.1.slim.min', get_template_directory_uri(). '/assets/js/jquery-3.5.1.slim.min.js', array(), 1.0, true );
wp_enqueue_script ( 'bootstrap.bundle.min', get_template_directory_uri(). '/assets/js/bootstrap.bundle.min.js', array(), 1.0, true);
wp_enqueue_script ( 'popper.min', get_template_directory_uri(). '/assets/js/popper.min.js', array(), 1.0 , true );
wp_enqueue_script ( 'swiper-bundle.min', get_template_directory_uri(). '/assets/js/swiper-bundle.min.js', array(), 1.0 , true );
wp_enqueue_script ( 'main js', get_stylesheet_directory_uri(). '/assets/js/main.js', array(), 1.0 , true );
};
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
This sounds like a caching issue. If you are not able to properly clear server's and browser's cache then you can have proper versioning based on the file's last modified time. Example:
$my_version = filemtime(get_template_directory() . '/custom.css');
wp_enqueue_style ('custom-css', get_template_directory() . '/custom.css', false, $my_version, 'all');
When the custom.css file is updated on the server, WP will append the appropriate timestamp and your browser will download the new version.
Also do not use spaces in your handle strings, ie. change 'custom css' to 'custom-css'.
Using the third parameter, the array(), upon enqueuing, you can define a dependency using the dependency handle, via the array( 'dependency_handle' ). Your dependency handle should be a one word string, you can't use style cssyou need to use style_cssor style-css.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_enqueue_style ( 'style_css', get_stylesheet_uri(), array(), '1.0', 'all' );
wp_enqueue_style ( 'custom_css', trailingslashit( get_template_directory_uri() ) . 'custom.css', array( 'style_css' ), '1.0', 'all' );
};
}; ?>
Here we specify that we want out custom_css to be enqueued AFTER the style_css.
Using the fourth parameter, the version, here 1.0 let Wordpress knows NOT to serve a cache version if the version as changed. Therefore if you specified 1.1 Wordpress will fetch a fresh version of our script. (For development tho, you might want just to use your browser in incognito mode, which doesn't cache anything)
I have created a wordpress plugin that creates various widgets. To keep page load time down, I only want to enqueue the associated scripts when the widget is being used.
To do this I created a function like this:
function enqueue_lightbox(){
wp_enqueue_style(
SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-fancybox-css',
'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css',
array(),
SKIZZAR_SHORTCODES__VERSION
);
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox' );
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox-media' );
}
And in my widget class I call it like this:
enqueue_lightbox();
The issue I have is that I have 2 widgets sharing the same piece of code, so I'd like to create a statement that says, if it hasn't been enqueued elsewhere already, enqueue it.
How would I write this function?
You can use wp_script_is function to check the file and load it like this
$handle = 'fluidVids.js';
$list = 'enqueued';
if (wp_script_is( $handle, $list )) {
return;
} else {
wp_register_script( 'fluidVids.js', plugin_dir_url(__FILE__).'js/fluidvids.min.js');
wp_enqueue_script( 'fluidVids.js' );
}
My PHP code below works great locally but as soon as I put this on the live server it takes the whole site down. After investigation error logs, it has an issue with the [] used in this line of code:
wp_enqueue_script( 'jquery', '//fake-jquery-script.js', [], null );
Here's the php in full, how do I get around this issue?
/**
* #desc De-register WP jquery
**/
add_action( 'wp_print_scripts', 'de_script', 100 );
function de_script() {
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
}
/**
* Inject jQuery early if there's a Gravity Form
*/
function gc_gform_inject_jquery( $content = '' ) {
global $gc_jquery_loaded_before_gform;
if ( !isset( $gc_jquery_loaded_before_gform )) {
// set global variable so jQuery isn't loaded twice
$gc_jquery_loaded_before_gform = true;
// inject jQuery code
echo '<!-- loading jquery before Gravity Form inline scripts -->';
gc_load_jquery_cdn_and_fallback();
}
return $content;
}
add_filter( 'gform_cdata_open', 'gc_gform_inject_jquery' );
/**
* Load jQuery in the footer or before the first Gravity Form.
* Include a local fallback if the Google CDN fails (e.g. User is in China)
*/
function gc_load_jquery_cdn_and_fallback() {
// Google CDN
echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery'. (SCRIPT_DEBUG ? '.js' : '.min.js') .'"></script>';
// Local fallback
echo '<script>if (!window.jQuery) { document.write(\'<script src="'. get_stylesheet_directory_uri() .'/js/vendor/jquery-1.11.2'. (SCRIPT_DEBUG ? '.js' : '.min.js') .'"><\/script>\'); }</script>';
}
/**
* Loading jQuery and jQuery-dependent scripts
* If jQuery was not already loaded before a Gravity Form, load it
* Also enqueue a fake version of it (for dependencies) and then
* remove this fake script
*/
function gc_load_javascript_in_footer() {
global $gc_jquery_loaded_before_gform;
// If jQuery has not been loaded already, load it
if ($gc_jquery_loaded_before_gform !== true) {
gc_load_jquery_cdn_and_fallback();
}
// Enqueue a fake script called "jquery" to for dependent enqueued scripts
// HERE'S THE PROBLEM
wp_enqueue_script( 'jquery', '//fake-jquery-script.js', [], null );
// Remove the fake script
function gc_remove_fake_jquery_script($tag) {
$tag = ( strpos($tag, 'fake-jquery-script') !== false ) ? '' : $tag;
return $tag;
}
add_filter( 'script_loader_tag', 'gc_remove_fake_jquery_script' );
}
add_action('wp_footer', 'gc_load_javascript_in_footer');
[] is PHP short hand for an empty array.
http://php.net/manual/en/language.types.array.php
But you require PHP 5.4+ for it to work.
If it works locally but fails remotely, chances are your remote server is running < PHP 5.4
Please call javascript with thid code
wp_enqueue_script( 'jquery', '//fake-jquery-script.js', array('jquery'), '2015-10-26' );
and Please download fake-jquery-script.js .and put on the projects js template folder and call javascript in
wp_enqueue_script( 'jquery', '//fake-jquery-script.js', array('jquery'), '2015-10-26' );
Setting the $in_footer parameter to true in wp_enqueue_script loads a script in the footer. This is great if I'm adding a new script. However, WordPress already provides a version of jQuery by default and this is enqueued in the document head.
How can I move the jQuery provided by WordPress from the header to the footer?
You need to de-register the existing query and re-register it to load in the footer.
function jquery_in_footer() {
if (!is_admin()) {
wp_deregister_script('jquery');
// load the local copy of jQuery in the footer
wp_register_script('jquery', home_url(trailingslashit(WPINC) . 'js/jquery/jquery.js'), false, null, true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'jquery_in_footer');
Bear in mind that if you have any other scripts enqueued that depend on jQuery and are not loaded in the footer, WordPress will still load jQuery in the header to satisfy that dependency.
(adapted from http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/)
Edit: If you really want to get crazy, you could modify the WP_Scripts object directly, but then you're dependent on the implementation never changing. I imagine that would change before they even thought of moving jquery.js' location in wp-includes :)
But just for fun…
function load_jquery_footer() {
global $wp_scripts;
$wp_scripts->in_footer[] = 'jquery';
}
add_action('wp_print_scripts', 'load_jquery_footer');
Maybe the defer attribute will help. There is a good article on this topic.
I use the following code for convinient nonblocking loading of any scripts, not just jQuery.
// Defer scripts.
function dt_add_defer_attribute( $tag, $handle ) {
$handles = array(
'jquery-core',
'jquery-migrate',
'fancybox',
);
foreach( $handles as $defer_script) {
if ( $defer_script === $handle ) {
return str_replace( ' src', ' defer src', $tag ); // Or ' async src'
}
}
return $tag;
}
add_filter( 'script_loader_tag', 'dt_add_defer_attribute', 10, 2 );
In my plugin i need to include 1 css and 2 js file (jquery.min.js and jquery.googleplus-activity-1.0.min.js).
i am using this code
function my_init_method()
{
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/js/jquery.min.js');
}
function addHeaderCode() {
echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/css/style.css" />' . "\n";
}
function my_jsscripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', '' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/js/jquery.googleplus-activity-1.0.min.js');
wp_enqueue_script( 'jquery' );
}
add_action('init', 'my_init_method');
//Include CSS
add_action('wp_head', 'addHeaderCode');
//Include JS
add_action('wp_enqueue_scripts', 'my_jsscripts_method');
but not able to add both of js file.
Keep in mind that i have to include jquery.min.js first then css and another js file jquery.googleplus-activity-1.0.min.js
I'd use a different handle for the jquery.googleplus-activity-1.0.min.js file. You may be confusing WordPress trying to reuse "jquery". So something like:
function my_jsscripts_method() {
wp_register_script( 'jquery.googleplus', '' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/js/jquery.googleplus-activity-1.0.min.js');
wp_enqueue_script( 'jquery.googleplus' );
}
Might be worth using the third argument to wp_register_script to have it depend on jquery.
As an aside, unless you have a very good reason, I'd probably use the version of jQuery that comes with WordPress (rather than replacing it). You may get compatibility issues.