WordPress Experts

Tag: jquery-migrate

  • How to load multiple versions of jQuery in your website ( different version of jQuery for specific pages )

    I had recently shared a detailed post on how to fix jQuery error in your website due to WordPress core update, which doesn’t load the jQuery migration script. And one of the visitors asked in the comment section, if they can load a different version of jQuery on different pages. I found this interesting and today I am writing this post with details on how you can load one version of jQuery on the entire site and a different version of jQuery for a few specific pages in your WordPress based website.

    How to load different version of jQuery in specific pages in WordPress

    Insert the following code in your active theme’s functions.php file and change the “If condition” as per your requirements. In the given code, it checks for pages with ID 2 and inserts the new jquery code. You will also have to change the value of $new_jq_url string variable value to the jquery version file URL. Here is the code : 

    /*
* change the IF condition in the code to meet your requirements. In this example, the condition checks for page with ID 2 using is_page() function. 
* Example conditions : 
*  // check for page with slug "about" : if(is_page('about')) 
*  // check for post with category "fruits" : if(has_category("fruits")) 
*  
* change the $new_jq_url string variable value to your required jquery version file URL.
*/

function wptips_custom_jqscript() {
        $new_jq_url = 'https://code.jquery.com/jquery-3.5.1.min.js';
	if(is_page(2)):   // change this condition to meet your requirements
       		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery',$new_jq_url, '','', true );
	endif;
}
add_action( 'wp_enqueue_scripts', 'wptips_custom_jqscript' );

    How the above code works

    WordPress uses wp_register_script function to register javascript frameworks and wp_deregister_script function to deregister or remove the javascript framework from the site. So, in the above code, we first added a condition to check, if the page ID is 2( you can add any condition, depending on your requirements) and if the condition is met, we used the wp_deregister_script function to deregister the default jQuery file and used wp_register_script function to register a new jQuery file for that page.

    Try implementing the given code and let me know if you have any questions in the comment section. I will try my best to reply and help you as much as I can.

  • How to fix $.browser undefined error in WordPress with jQuery Migrate

    $.browser function has been deprecated from the latest jQuery version. It had the flags $.browser.webkit, $.browser.safari, $.browser.opera, $.browser.msie and $.browser.mozilla to detect respective browsers in previous versions. But now, if your site has code with these flags and your theme has the latest version of jQuery, then it will throw an error message sayings “undefined”. But do not worry, you can fix it.

    From WordPress version 5.5, “jquery-migrate” library has been removed from WordPress core. Hence, you will get an error if your theme or any other plugins are trying to access any jQuery features that are deprecated. You can also install a plugin called Enable jQuery Migrate Helper, to include the jquery-migrate library in the latest version of WordPress.

    How to fix $.browser error:

    Normally this issue occurs in an older version of themes that are not updated. You have to enqueue the jquery-migrate library in your theme to fix the issue. 

    if ( !function_exists( 'wptips_add_juery_migrate' ) ) {
  /**
   * Add jQuery Migrate script in front end.
   *
   */
  function wptips_add_juery_migrate() {
    wp_enqueue_script( 'jquery-migrate' );
  }
}
add_action( 'wp_head', 'wptips_add_juery_migrate' );

    You can check your theme for jquery script enqueue or any other script with jquery as a dependency and make sure that you add an additional dependency of jquery-migrate to fix the issue.

    How to fix errors in the admin section only :

    // add jquery migrate only to the admin section
function wptips_add_jquery_migrate() {  
        wp_enqueue_script('jquery-migrate');  
}  
add_action('admin_enqueue_scripts', 'wptips_add_jquery_migrate');

    Note: You have to add the code in the functions.php file of your active theme for it to work.


    If you still have any questions, please ask me in the comment section. I will be glad to help you out.