When I was working on recent posts, I was surprised to notice that jQuery script was loaded twice.

So I investigated it by looking at my current theme, as well as WordPress code. I found out that both WordPress and my current theme is loading jQuery.

My current theme is Pyrmont V2. I look at the header.php, I found out this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/basic.js" type="text/javascript"></script>

So this is the reason why I found two jQuery source code being loaded (shown below).

But what about WordPress? In which file does the jQuery listed to be automatically loaded? After using Windows File-Content Search to scrutinize WordPress’wp-includes folder, I found the answer:

script-loader.php

   //...   
   $scripts->add( 'cropper', '/wp-includes/js/crop/cropper.js', array('scriptaculous-dragdrop'), '20070118');
   $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2');	
   $scripts->add( 'jquery-ui-core', '/wp-includes/js/jquery/ui.core.js', array('jquery'), '1.7.1' );	
   //...

I found it interesting that WordPress is loading jQuery from localhost (sodeve.net), but Pyrmont is loading it from Google. There must be a reason for this. Dave Ward at Encosia teaches us that the reasons are:

1. Decreased Latency. Because Google is using Content Delivery Network (CDN). Therefore, it is much faster than your server
2. Increased Parallelism. Because it reduces the number of connections made to a single server. Browser usually has limit on the number of connection to a single server
3. Better Caching. Since the script is obtained from Google, it is very likely the script is already cached when visited any Google’s website that uses jQuery

Anyway, I’m sold to Dave’s idea. I replaced the line in script-loader.php, using http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js instead of /wp-includes/js/jquery/jquery.js. Then I observed the performance using Firebug.

Hmm.. WordPress added the “ver” parameter in the script request. This invalidated Dave’s point no. 3. What can we do to make WordPress not to add “ver” parameter in the script request?

How to Make WordPress Load Script without Ver Parameter

Open class.wp-script.php inside folder wp-includes of WordPress

//.....

$src = add_query_arg('ver', $ver, $src);

//.....

Comment the line shown above (line 117).

I believe things load faster now 😀 (At least for Google, sodeve.net server is a shared hosting, so its performance is difficult to expect :P)

I hope it helps 😉 If you like this article, kindly consider to visit the sponsors to check out their offers. Cheers!

Are you using Google Syntax Highlighter plugin for WordPress?

If you do, I am using the plugin too. Anyway, I was analyzing how this blog loads using Chrome’s Developer Tools. I am surprised that this plugin load all brushes at once.

Hmm.. inefficient. So I come up with this enhancement.

First let’s display the original:

<?php
/*
Plugin Name: Google Syntax Highlighter for WordPress
Plugin URI: http://wordpress.org/extend/plugins/google-syntax-highlighter
Description: 100% JavaScript syntax highlighter This plugin makes using the <a href="http://code.google.com/p/syntaxhighlighter">Google Syntax highlighter</a> to highlight code snippets within WordPress simple. Supports C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML, and HTML. Read  <a href="http://code.google.com/p/syntaxhighlighter/wiki/Usage">usage directions.</a> 
Version: 1.5.1
Author: Peter Ryan 
Author URI: http://www.peterryan.net
*/

function insert_header() {
	$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
	<link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<?php
}

function insert_footer(){
$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shLegacy.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushPhp.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushJScript.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushJava.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushVb.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushSql.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushXml.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushPython.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushRuby.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCss.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shThemeDefault.css"/>
<script class="javascript">
SyntaxHighlighter.defaults['wrap-lines'] = false;
dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php
}
add_action('wp_head','insert_header');
add_action('wp_footer','insert_footer');
?>

And now the enhanced version:

ENHANCED

<?php
/*
Plugin Name: Google Syntax Highlighter for WordPress
Plugin URI: http://wordpress.org/extend/plugins/google-syntax-highlighter
Description: 100% JavaScript syntax highlighter This plugin makes using the <a href="http://code.google.com/p/syntaxhighlighter">Google Syntax highlighter</a> to highlight code snippets within WordPress simple. Supports C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML, and HTML. Read  <a href="http://code.google.com/p/syntaxhighlighter/wiki/Usage">usage directions.</a> 
Version: 1.5.1
Author: Peter Ryan 
Author URI: http://www.peterryan.net
*/
function insert_header() {
	$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
	<link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shThemeDefault.css"/>
	<?php
}
function insert_footer(){
$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>

<script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shLegacy.js"></script>
<script class="javascript">
var arLanguages = new Array();
var arLangCounts = 0;
var arAliases = [
	{key:'shBrushCSharp.js', val:['c#','c-sharp','csharp']}
	,{key:'shBrushCpp.js', val:['cpp','c']}
	,{key:'shBrushBash.js', val:['bash','shell']}
	,{key:'shBrushAS3.js', val:['actionscript3','as3']}
	,{key:'shBrushXml.js', val:['xml','xhtml','html','xslt']}
	,{key:'shBrushVb.js', val:['vb','vbnet']}
	,{key:'shBrushSql.js', val:['sql']}
	,{key:'shBrushScala.js', val:['scala']}
	,{key:'shBrushRuby.js', val:['ruby','rails','ror']}
	,{key:'shBrushPython.js', val:['py','python']}
	,{key:'shBrushPowerShell.js', val:['powershell','ps']}
	,{key:'shBrushPlain.js', val:['text','plain']}
	,{key:'shBrushPhp.js', val:['php']}
	,{key:'shBrushJScript.js', val:['js','jscript','javascript']}
	,{key:'shBrushJavaFX.js', val:['jfx','javafx']}
	,{key:'shBrushJava.js', val:['java']}
	,{key:'shBrushGroovy.js', val:['groovy']}
	,{key:'shBrushDiff.js', val:['diff','patch']}
	,{key:'shBrushDelphi.js', val:['delphi','pascal']}
	,{key:'shBrushCss.js', val:['css']}
	,{key:'shBrushPerl.js', val:['pl','perl','Perl']}
				];
function getScriptName(alias){
	var i = 0;
	for (i=0; i < arAliases.length; i++)
	{
		if (arLanguages.indexOf(arAliases[i].key)<0)
		{
			if (arAliases[i].val.indexOf(alias)>=0)
				arLanguages.push(arAliases[i].key);
		}
	}
}	
if (jQuery)
{
	$sdv = jQuery.noConflict();
	$sdv(document).ready(function(){
		$sdv("pre").each(function(i){
			getScriptName(this.className);							
		});		
		$sdv.each(arLanguages, function(){
			var scrName = '<?php echo $current_path; ?>Scripts/' + this;
			$sdv.ajax({
			  type: 'GET',
			  url: scrName,
			  cache: true,
			  success: function(){
					++arLangCounts;
					if (arLangCounts == arLanguages.length)
					{
						SyntaxHighlighter.defaults['wrap-lines'] = false;
						dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
						SyntaxHighlighter.all();
						dp.SyntaxHighlighter.HighlightAll('code');
					}
				},
			  dataType: 'script',
			  data: null
			});			
		});
	});
}
</script>
<?php
}
add_action('wp_head','insert_header');
add_action('wp_footer','insert_footer');
?>

So instead of loading all the brushes, we will dynamically load it using jQuery. I hope it’s useful for you 🙂

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

What should I do to install jQuery?

Since WordPress ver. 2.2, jQuery was automatically added into your WordPress installation. And it was released on May 2007, that’s like more than 2 years ago. So there is a high chance that you already have jQuery in your WordPress without you realizing it. 🙂

How to check whether jQuery is loaded by WordPress?

Install Firebug. Firebug is a plugin for Firefox browser. Browse the WordPress blog using Firefox, then enable the firebug by clicking the firebug icon at the bottom-right corner. The icon will change color from gray to something orange-ish. Open the Net tab, then refresh Firefox. You should have something like this:

If you see jquery.js there, it means jQuery is now available for your usage.

You can also check inside your code:

if (jQuery)
{
     //jQuery is loaded, do something
     $j = jQuery.noConflict();
     $j(document).ready(function() {
           // do stuff when DOM is ready
           alert('jQuery wants to say hi!');
     });
}

Of course your code must be put into separate .js file.

Can jQuery conflict with other library?

Yes, it might conflict with Prototype Framework..

Have fun with jQuery! If you like this article, kindly consider to visit the sponsors to check out their offers. Cheers!