<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ZS Labs</title>
	<atom:link href="http://zslabs.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://zslabs.com</link>
	<description>Developer. Designer. Futurama Aficionado.</description>
	<lastBuildDate>Fri, 18 May 2012 10:14:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Another look at loading jQuery&#8230; yes, again!</title>
		<link>http://zslabs.com/loading-jquery/</link>
		<comments>http://zslabs.com/loading-jquery/#comments</comments>
		<pubDate>Thu, 17 May 2012 20:47:33 +0000</pubDate>
		<dc:creator>zslabs</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://zslabs.com/?p=37</guid>
		<description><![CDATA[Clarification: The code below would be better suited for a plugin &#8211; not a theme. I will most likely be making this into a plugin in the coming days after some more testing. Update: I&#8217;ve made this into a plugin &#8230; <a href="http://zslabs.com/loading-jquery/">Continued</a>]]></description>
			<content:encoded><![CDATA[<p><strong>Clarification: The code below would be better suited for a plugin &#8211; not a theme. I will most likely be making this into a plugin in the coming days after some more testing.</strong></p>
<p><strong>Update: I&#8217;ve made this into a <a href="http://wordpress.org/extend/plugins/wp-jquery-plus/">plugin</a> for those interested. You can post any issues here.</strong></p>
<p>There&#8217;s been a <a href="http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes" target="_blank">whole heap of discussions</a> recently about the correct way to load jQuery. I thought I&#8217;d throw my solution into the ring (which is in-use on this site right now). Here&#8217;s what I have; I&#8217;ll explain below:</p>
<pre class="brush: php; title: ; notranslate">function zslabs_scripts() {
if (!is_admin()) {
// Enqueue the core jQuery script (just in-case)
wp_enqueue_script('jquery');
// Get current version of jQuery from WordPress core
$wp_jquery_ver = $GLOBALS['wp_scripts']-&gt;registered['jquery']-&gt;ver;
// Figure out which protocol to use
$http_protocol = is_ssl() ? 'https:' : 'http:';
// Set Google jQuery URL
$jquery_google_url = $http_protocol.'//ajax.googleapis.com/ajax/libs/jquery/'.$wp_jquery_ver.'/jquery.min.js';
// Setup Curl Function
function jquery_get_data($url) {
$ch = @curl_init($url);
@curl_setopt($ch, CURLOPT_HEADER, TRUE);
@curl_setopt($ch, CURLOPT_NOBODY, TRUE);
@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, FALSE);
@curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$status = array();
preg_match('/HTTP\/.* ([0-9]+) .*/', @curl_exec($ch) , $status);
return ($status[1] == 200);
}
// Determine if Google jQuery URL is available
if (jquery_get_data($jquery_google_url)) {
wp_deregister_script('jquery');
wp_register_script('jquery', ''.$jquery_google_url.'', '', $wp_jquery_ver, false);
}
}
}

add_action('wp_enqueue_scripts', 'zslabs_scripts');</pre>
<p>Alright kiddies, here we go:</p>
<p>First, we create a function to hold our scripts:</p>
<pre class="brush: php; title: ; notranslate">function zslabs_scripts() { }</pre>
<p>Since we only want this to effect the front-end of the website, we do a quick check to make sure we&#8217;re not in the admin:</p>
<pre class="brush: php; title: ; notranslate">if (!is_admin()) {}</pre>
<p>Next, let&#8217;s make sure that the core jQuery library is loaded (in-case any naughty themes or plugins have deregistered it):</p>
<pre class="brush: php; title: ; notranslate">wp_enqueue_script('jquery');</pre>
<p>Next, using the global <strong>$wp_scripts</strong> variable, we&#8217;ll get the version of jQuery included in the WordPress core:</p>
<pre class="brush: php; title: ; notranslate">$wp_jquery_ver = $GLOBALS['wp_scripts']-&gt;registered['jquery']-&gt;ver;</pre>
<p>Next, we&#8217;ll use the handy-dandy <a href="http://codex.wordpress.org/Function_Reference/is_ssl" target="_blank">is_ssl()</a> function to determine if the site is using SSL or not:</p>
<pre class="brush: php; title: ; notranslate">$http_protocol = is_ssl() ? 'https:' : 'http:';</pre>
<p>Next, we&#8217;ll create the variable that&#8217;ll hold the Google jQuery URL:</p>
<pre class="brush: php; title: ; notranslate">$jquery_google_url = $http_protocol.'//ajax.googleapis.com/ajax/libs/jquery/'.$wp_jquery_ver.'/jquery.min.js';</pre>
<p><em>So &#8211; what we&#8217;re doing above is substituting in both the <strong>http protocol</strong> and <strong>version number</strong> as part of the Google URL string &#8211; genius!</em></p>
<p>Next, we&#8217;ll setup the CURL function to determine if a URL is available or not:</p>
<pre class="brush: php; title: ; notranslate">function jquery_get_data($url) {
$ch = @curl_init($url);
@curl_setopt($ch, CURLOPT_HEADER, TRUE);
@curl_setopt($ch, CURLOPT_NOBODY, TRUE);
@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, FALSE);
@curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$status = array();
preg_match('/HTTP\/.* ([0-9]+) .*/', @curl_exec($ch) , $status);
return ($status[1] == 200);
}</pre>
<p>After that &#8211; we can create a simple if statement to determine if the Google URL is available or not and if it is, do the magic:</p>
<pre class="brush: php; title: ; notranslate">if (jquery_get_data($jquery_google_url)) {
wp_deregister_script('jquery');
wp_register_script('jquery', ''.$jquery_google_url.'', '', $wp_jquery_ver, false);
}</pre>
<p><em>What we&#8217;re doing above is deregistering the core WordPress jQuery file (it&#8217;s okay &#8211; don&#8217;t freak out yet) and then reregister jQuery (using the same handler), but substituting in our Google URL.</em></p>
<p>Lastly, close out the function and wrap that baby in a <strong>wp_enqueue_scripts</strong> action:</p>
<pre class="brush: php; title: ; notranslate">add_action('wp_enqueue_scripts', 'zslabs_scripts');</pre>
<p>So &#8211; why is this awesome? Well, it solves a few issues that others ran into issues with (and addresses some that other theme/plugin developers have had):</p>
<ul>
<li>Loads jQuery from Google only if it&#8217;s available</li>
<li>Uses the identical jQuery version from Google that WordPress has available in your WP install (this was the big one)</li>
<li>Checks and makes sure to use the correct http protocol</li>
<li>Looks a hell of a lot cleaner if you view the source</li>
<li>I made it <img src='http://zslabs.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </li>
</ul>
<p>I&#8217;m sure this could use some improvements &#8211; so if anyone has any suggestions, I&#8217;m certainly open to anything that would make this better. Thanks!</p>
]]></content:encoded>
			<wfw:commentRss>http://zslabs.com/loading-jquery/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

