Skip to main content

Add New Version of jQuery to Drupal 7 Theme

Today I needed to add the newest version of jQuery (1.7) to a custom Drupal 7 theme that I was building. I initially used the jQuery Update module and hacked the replaced version of jQuery with the version I needed. I know, this was not the best practice, but this was a rush job and I was in a hurry (don't hack the core, or any contributed modules for that matter!). Everything was working fine until I wanted to add a new field to a content type and the form quit working in the admin overlay, which was using the Seven theme. Crap!

The Right Way

So I began searching for the correct way to replace the core jquery with a newer version for my theme only. First I explored the template_preprocess_html() function but was unable to locate the $scripts variable. After some further digging I found the hook_js_alter() function. This function is called right before the javascript is added to the theme. So, in my template.php file I added the following code:

  1. function MYTHEME_js_alter(&$javascript) {
  2.    $javascript['misc/jquery.js']['data'] = drupal_get_path('theme', 'MYTHEME') . '/js/jquery.1.7.2.min.js';
  3. }

Now the new version of jQuery loads for my theme only and won't break any other themes.