I have used WordPress and jQuery together on so many of my projects in the past that I figured I would share a little tip for those who might be starting out. Google Libraries hosts a copy of the latest jQuery version and allows developers to use this in their live websites. This offers many benefits, and if you are using jQuery, I strongly suggest that you use the Google Hosted one. The Google Hosted one is delivered by a CDN. A CDN allows the file to be stored on several different servers, and is sent to the user from the closest physical server to them. Not only that, but if they user has visited a site other than yours that also uses Google Hosted jQuery, it is probably already stored in their cache, therefore they won’t need to download it at all!
There are a number of great reasons to implement Google Hosted jQuery, but I’ll keep it short and sweet. Here’s how to do it.
Load Google Hosted jQuery in your Header
The first way is by including it in your theme’s header.php file, right above your wp_head call. WordPress automatically loads an instance of jQuery, so first you will need to deregister the default script. Then simply register and enqueue the version hosted by Google, and you should be good to go.
<?php
wp_deregister_script('jquery'); // Remove the default jQuery script
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', false, '1.6.2'); // Register the Google hosted Version
wp_enqueue_script('jquery'); // Enqueue the Google Hosted version
?>
<?php wp_head(); ?>
Load Google Hosted jQuery with your Functions
The alternative way to go about loading Google’s jQuery in your WordPress theme is by adding a little bit of code to your theme functions, in your functions.php file. The following code should give you the same result.
if ( !is_admin() ){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"), false, '1.6.2');
wp_enqueue_script('jquery');
}
I hope you find this little tip helpful. Questions or comment? As always, just leave a comment below and I’ll reply as soon as I can!
It is written in jquery which works quickly, that’s why I like it
jQuery is definitely a great tool, and there are countless reasons that I love it, haha.
So what’s the point of this Ryan? Will I see a difference in my website load speed? (sorry I’m not very tech savvy
)
Anita’s latest post …Small kitchen design secrets from the pros
Hi Anita,
Sorry, I should have elaborated in my original post, haha.
You should see improved loading speed of the jQuery script on your website using the version hosted by Google. As I mentioned, they use a CDN, or Cloud Delivery Network. This means that the script is hosted on physical servers around the world. The one that is closest to the visitor, will be the one that is loaded.
Along with the CDN, there is also a large possibility that they already have the jQuery script saved in their cache. A lot of websites use Google’s jQuery. If the user has visited a site that has the Google version, the browser will call the version that is already cached, so they won’t even need to download it again at all.
It is also one less call that the browser needs to make to your server, which will cut down on loading time.
Hopefully this helps clear it up a little bit more, and if you have any other questions please feel free to ask!
Just out of curiosity, is there a WordPress plugin to do this?
Hello,
I did a quick search, and I was able to find the Use Google Libraries plugin. It seems like this might do the trick. I haven’t looked into the plugin itself though, and when you can, it is usually better to do things yourself as opposed to relying on a plugin. Plugins are great, but they can also add some bulk to your blog and slow down loading times.
I remember when I first heard about this, thinking how it would be a great tool to speed up some slow sites.
It’s beyond my capability, but I’m hoping that more and more WP developers start integrating it into their themes/plugins. Speed rules the Web.
James’s latest post …The eye has it
Hey James,
It definitely does help speed up your blog. If your current theme doesn’t support it, all you have to do is add one of the above mentioned lines of code.
And yes, speed definitely does rule the web.
Hey thanks for this post. Although I can’t really understand much of it. lol
Our site’s performance has slowed down. Too many plugins and jquery scripts i guess.
Too many plugins and scripts can definitely slow down your site. You really want to keep them to a minimum, to keep page load speeds down. What is it in particular that you don’t understand? I would be more than happy to try and explain clearer.
great article.thanks a lot
Thanks Smu!
Ryan,
Is this really worth the effort? How much performance increase (loading time decrease) should a person expect to see by implementing the changes to their WordPress theme?
Ted’s latest post …Best Link Building Methods For Blogs
Hey Ted,
You do bring up a valid point. jQuery itself is < 100kb, so it really isn't a significantly large file by any means. I did a search, to try and see if I could dig up some results of performance testing but was unable to find much. My thoughts are that any steps you can take to increase performance, no matter how nominal, are worth it. Visitors, and Google, love fast page load times. And there is a good chance that a lot of your visitors have the Google Hosted jQuery cached, so it is one less file they need to load.
Awesome,ii a very happy when my friends share this to me i never knew about this article article till i find it.this is a big help in finishing my project.
Hey Michelle,
I’m happy to hear that this has been useful to you! Good luck with your project!
Speed is really important. I haven’t tried this, maybe I have to research on my own to further understand it. . but thanks for sharing!
Hey Jasmine,
Is there something in particular that you don’t understand? If you have any questions, feel free to ask. I’d love to try and answer them for you!
thank you so much for sharing this one.. i never thought of this before, guess i really have to learn more about this kind of stuffs to help me become a better blogger!
polly’s latest post …- DATING TIPS FOR WOMEN
Hey Polly,
No matter how much you know, there is always more to learn, haha. I’m glad that you were able to find this helpful!
Great information! this is just what i need! thank you so much for sharing this one.. hope that i can be more familiar with it!
danny’s latest post …TEENAGE DATING SITES
Hey Danny,
I’m glad you were able to find this useful! Thanks for the comment.
nice article youve got here thanks a lot hope this code helps me in my wordpress theme. ^__^
Hi Iownies,
I am glad that this helped you out! Good luck with your WordPress theme!
Thanks for sharing how to use Google Jquery in wordpress. I will try it and hope to get faster speed.
Lee | Money4Invest’s latest post …20 Cute Mid Autumn 中秋节 Wallpapers for Free Download
You’re welcome Lee! I hope this helps you out!
You are quite convincing! I will definitely try the Google Jquery in wordpress.. Thanks for sharing!
Wendy’s latest post …Luxury Chalet Rentals
Hi Wendy,
You are welcome! If you have any questions, feel free to ask!
Thanks for the info, it is exactly what I’ve been looking for. Nice one!
You’re welcome! I’m glad I could help.
Hey thanks for this post. Although I can’t really understand much of it!
the rock cena’s latest post …The Rock and Cena
Was there anything in particular that you didn’t understand? If I can, Id love to help clear up anything that you might need help with.
I recently came across your blog and have been reading posts. I thought I would leave a comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Well I am not very familiar with this but thanks to your information…
Cameron’s latest post …What Is Spam Bully?
If someone have the know how of how jquery works or even javascript with the little information of HTML i don’t think it will be much difficulty to use the jquery hosted by Google
Stephen Jack’s latest post …Honeycomb Android 3.0 Review
[...] Head on over to Google Libraries API and see if you can take advantage of this great service. If you are running WordPress, check out an article that I wrote earlier on How To Use Google Hosted jQuery In Your WordPress Theme. [...]
Thank you for the great post! It may be old but it’s still working for me!
edmond0925′s latest post …How I Jump Higher
Although some points of your post is difficult for me to understand… I guess I learn something from it, Thanks for sharing those important info about jquery works.
Barbara’s latest post …Learning To Deal With Panic Attacks
Hi Barbara,
Was anything in particular confusing for you? If you have any questions, please feel free to ask!
I enjoyed reading your post. Thank you so much for sharing this kind of information i really appreciate it. I will surely try this and i’m hoping this would help me to become a better blogger and to gain more speed. Keep up the work Ryan.
kim’s latest post …My Arowana Is Not Eating No Matter What I Do !!!
I like it because it is written in jquery which works quickly.
RachelAng34′s latest post …Gadgets Reviews News And More
i knew i would learn something valuable from this post
thanks for sharing!
Jewel’s latest post …What are the Health Risks Associated with Black Mould?
as a newbie, i totally appreciate your post
thank you.
Ethel’s latest post …Holiday Accidents Compensation Claims
same with ethel, i’m a beginner and i truly appreciate all the information you have gathered in your post. thanks
olivia34newton’s latest post …1300 numbers
Dear Ryan,
I have study programming at school: C, Java, Labview, Matlab. Now, I want to design myself a web. What kinds of language must I know? Do they easy to study? What is the most popular?
Thanks a lot.
I have visited here http://www.800artdirectory.com/artists/design/ and found something useful
Hi Peter,
There are many languages that are used in web development, but learning markup is a good start. HTML / CSS are the basic building blocks, and necessary for any website.
From there, it depends which side of web development you want to be on. Front end or back end. What are you mostly interested in?
I really appreciate your post..Thanks for sharing it..
joyce’s latest post …Getting Pregnant Faster
I want to learn different language..Thanks for sharing this useful post..
Celeste’s latest post …Who Makes the Highest Quality E-Cig
It’s a good idea to let google host the jquery file if you are on a shared hosting.
This post is really had a great idea..I really want to learn different kind of language..Thanks for sharing this inspiring post..
Gracie’s latest post …PPI
I am really glad that I have found the post here…Great job!!Thanks as well for the shared thoughts here…
Aina’s latest post …oxley bizhub 2 Singapore
Hi…Is this really possible?Well this is the first time I have heard ofthis…
Erricch’s latest post …Everything You Need to Know When Apply for Auto Loan
Nice tutorial. Very useful and so easy to understand.
Liz Linking Guide’s latest post …Free Directory List from Virtual Media Options
I love writing tutorials too but I am not well versed with PHP. Maybe I can check back for more to exchange ideas with you. Hope to see you on my site. Thanks.
The Money Maker@Make Money Online’s latest post …H&R Block Promo Codes 2012
Get your powerful Web Hosting with Unlimited Spaces and Bandwidth, Dedicated Servers, Domain names, SSL, Smart Server and reseller solutions”
A really helpful tutorial – thanks!
hi..nice info you wrote here..i want to know about how to minimize jquery script. Sometimes theme developer offer newbie like me with a lot jquery tools to build “anything/anyshape you want “wordpress based sites . Though finally we`ve only use 1-3 scripts only
Its safe to delete another useless scripts ? ( e.g. variation of slider scripts etc ) Thanks
web design company website design company Navi Mumbai web designing web designing company web designing companies web designing india web designing mumbai web designing companies in mumbai ecommerce web design company web design company in mumbai web design company mumbai Best web design company in Navi Mumbai e commerce website web design company navi mumbai web design company in india website development web services design & development web design services website development india web marketing custom website development cheapest web design website development mumbai web design india ecommerce web design professional web design online marketing web design companies web design software web design templates web design affordable web design custom web design web design mumbai web design in mumbai web design firms web design in india outsource web design web design and development web hosting india website hosting india web hosting mumbai freelance web designer free web hosting sites web hosting best website designs website designs website creation top website designs website designers india real estate website design website design pricing small business website design ecommerce website developer ecommerce website development company
Hey thanks for this post. Although I can’t really understand much of it.
website design company in navi mumbai’s latest post …Website Design Company in Mumbai India , Website Designing Mumbai , Web Designing,Ecommerce Shopping Carts,SEO , Web Promotion,Web Solutions,Web Development in Mumbai – India, UK , USA
Thanks for sharing such an awesome post. This will definitely help improve work flow and also reduce page load times. Keep up the good work Ryan!
Edd’s latest post …Designing A Brand Logo
You can download links on your site. I find that this plug-in integrates nicely into dashboard so I can check everything there.
Brent’s latest post …Extenze for women
You should point out that is better to use your local version and then have the Google version as a fallback. Or at least set it up to check in case Google is down for some reason, although that does seem silly, I know…