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/jquery.min.js', false); // 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/jquery.min.js"), false);
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!
Thnx for this post this post is very helpfull
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
hi, very great this blog.
Thank you Aylton!
[...] 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
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’s latest post …Free Directory List from Virtual Media Options
Hey Liz,
Glad I was able to help out!
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.
Liz’s latest post …H&R Block Promo Codes 2012
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
Hello,
I can’t really recommend if you should delete or remove scripts without seeing what they are. If they come with a plugin, you should probably keep them unless you know 100% that they will not break anything.
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
Hey Edd,
Glad I can help! Thanks for commenting.
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…
Thomas,
Excellent point! I myself like to use Google Hosted as my primary script, and then have a local fallback. That way you still see the benefits of the CDN.
Thanks for the response!
Excellent tips! I will always keep this in mind.. Bookmarked.. DONE!
Mrs.Batista’s latest post …Wedding Mate
Love the idea of a CDN, yet I’ve not yet found one client willing to pay for the service. Some day…
Rebecca Gill’s latest post …Our New Child Has Finally Arrived: A Genesis Theme Store
Hi Rebecca,
The good thing about using Google Hosted Scripts is that you don’t need your own CDN for them, as they use Google’s. There are also free alternatives, like CloudFlare that may help you out!
Good luck!
Excellent tutarial! This is the post what exactly I was looking for.This post will help a lot.
did not really take care of my main problem but nevertheless kudos anyways
Hey There,
What problem are you experiencing? If you elaborate, maybe I can help you out, or at least point you in the right direction.
Great post, I have jquery on one of my sites and for some reason I also have a jquery page indexed in the serps and I dont understand why. May be i set it up wrong. What do you think?
Jen Franklin’s latest post …Vigrx Plus
Hi Jen,
You shouldn’t have a jQuery page indexed. jQuery is a script, so it should load like the rest of your Javascript files. Do you have a link that you can point me to? I can take a look if you’d like.
You really should be pointing people at the
//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
url instead. Otherwise you’re hardcoding an outdated version of jQuery that will break plugins that require functions that come bundled in the newer versions that come with WP.
jquery/1/jquery.min.js will always pull in the newest version in the 1.x branch
Ah, you are completely right. I updated my post, so it will now pull the latest 1.x branch. Thanks for the comment!
Thanks for this post, i am a noob when it comes to anything coding, this will help me alot though to considering im on shared host, i am using Cloudflare so it helps load times a bit. I am going to be moving onto a VPS or Cloud soon, but of course being the noob i am i need to research that some as well lol.
Anyway thanks for this, i was wanting to work on some jQuery drop down menus, and if this will descrease the load a bit even better.
Cheers
Thanks’s latest post …Winter In The Park
I’m glad you found it useful! Thanks for reading
thank you for the introduction to this otherworldly tool!
jeff’s latest post …Climbers and Dogs May 7, 2013 Midday Analytics Report
I was pretty pleased to uncover this site. I want to to thank you for ones time for this particularly fantastic read!! I definitely appreciated every bit of it and i also have you bookmarked to check out new things in your web site.