The power of $wp_scripts

There really isn’t that much power to $wp_scripts but I thought that would make for a good section title. $wp_scripts is a global variable that contains all the script information that will be added to your page. Of course, you can’t add a script to your header after the header has already run, so this will only work when you need to add a script to your footer. There is a lot going on with $wp_scripts but for our purposes, we only want to hook into the part that contains the info for the scripts that will appear in the footer.

First things first, let register our script in the functions.php file:

function our_script_init() {
   $template_url = get_template_directory_uri();
   wp_register_script('our_script_js', $template_url.'/js/our_script.js', array( 'jquery' ),'',true);
}		
add_action( 'init', 'our_script_init' );

For more info on wp_register_script() check out the CODEX.

Now that our script is registered, we can create a function that will hook into $wp_scripts and add our script only if the function is being used.

Here is our simple function:

function simple_function() {
   global $wp_scripts;
   $wp_scripts->in_footer[] = 'our_script_js';
}

Of course, you can add a lot more to the function, but for the sake of just using it to add the script, It is really that simple. Now, when you use simple_function() on a page, the script that we registered will be added to the footer script queue.

It took a lot of messing around and I was finally able to put something together that worked in most browsers. Sorry IE people, this one won’t work for you, though if anyone figures out a fix for IE let me know. Then the function will work for all major browsers.

Here is the JavaScript:

<script type="text/javascript">
function addLink() {
	var body_element = document.getElementsByTagName('body')[0];
	var selection;
	selection = window.getSelection();
	var pagelink = "<br /><br /> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &copy; c.bavota"; // change this if you want
	var copytext = selection + pagelink;
	var newdiv = document.createElement('div');
	newdiv.style.position='absolute';
	newdiv.style.left='-99999px';
	body_element.appendChild(newdiv);
	newdiv.innerHTML = copytext;
	selection.selectAllChildren(newdiv);
	window.setTimeout(function() {
		body_element.removeChild(newdiv);
	},0);
}
document.oncopy = addLink;
</script>

Just add this between your page’s head tags, and change the copyright notice to whatever you want.

Demo

To test it out, copy something from the paragraph below and paste it into your favorite text editor.

First, let’s put together some HTML.

<div id="slideshow">
<div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div>
<ul>
<li>
	<img src="img1.jpg" width="387" height="258" alt="" />
    <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p>
</li>
<li>
	<img src="img2.jpg" width="387" height="258" alt="" />
    <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p>
</li>
<li>
	<img src="img3.jpg" width="387" height="258" alt="" />
    <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p>
</li>
<li>
	<img src="img4.jpg" width="387" height="258" alt="" />
    <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p>
</li>
</ul>
</div>

Each slide is a list item that contains an image and a paragraph. Let’s style it to get it looking the way we want.

#slideshow {
	border: 1px solid #ccc;
	padding: 10px;
	width: 600px;
	height: 280px;
	}
 
	#slideshow ul {
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
		}
 
		#slideshow ul li {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			}
 
			#slideshow ul li.current {
				display: block;
				}
 
		#slideshow li img {
			float: left;
			margin-right: 20px;
			}
 
 
	#slideshow #controls {
		width: 100%;
		text-align: right;	
		}

Our CSS will add some simple styles. It will also make sure that our unordered list has a relative position so that all of our list items can be aligned directly on top of one another. That will give the illusion that we are switching between slides, when really all we are doing is making one slide display while all the other slides are hidden. That will be done with a little bit of jQuery.

(function($) {
	var len = $("#slideshow li").length;
	var x = 0;
	$("#slideshow #total").text(len);
	$("#slideshow li:eq(0)").addClass("current");
	$("#slideshow li").each(function() {
		$(this).attr('rel', x);
		x++
	});	
	$("#next").click(function() {
		var current = $("#slideshow .current");
		var next = parseFloat(current.attr('rel'))+1;
		if(next==len) {
			return false;
		}
		$("#num").text(parseFloat(next)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==next) {
				$(this).addClass('current');
			}
		});									
	});
	$("#prev").click(function() {
		var current = $("#slideshow .current");
		var prev = parseFloat(current.attr('rel'))-1;
		if(prev<0) {
			return false;
		}
		$("#num").text(parseFloat(prev)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==prev) {
				$(this).addClass('current');
			}
		});									
	});					
})(jQuery)

This code will count the number of list items and display that number in our counter. It will also cycle through each list item and give it a reference number, which is how we can control which slide will appear. Next, it sets up our controls to scroll forward and backward through the slides.

Put it all together and you get this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Basic Slideshow</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#slideshow {
	border: 1px solid #ccc;
	padding: 10px;
	width: 600px;
	height: 280px;
	}
 
	#slideshow ul {
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
		}
 
		#slideshow ul li {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			}
 
			#slideshow ul li.current {
				display: block;
				}
 
		#slideshow li img {
			float: left;
			margin-right: 20px;
			}
 
 
	#slideshow #controls {
		width: 100%;
		text-align: right;	
		}
 
</style>
</head>
 
<div id="slideshow">
<div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div>
<ul>
<li>
	<img src="img1.jpg" width="387" height="258" alt="" />
    <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p>
</li>
<li>
	<img src="img2.jpg" width="387" height="258" alt="" />
    <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p>
</li>
<li>
	<img src="img3.jpg" width="387" height="258" alt="" />
    <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p>
</li>
<li>
	<img src="img4.jpg" width="387" height="258" alt="" />
    <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p>
</li>
</ul>
</div>
<script type="text/javascript">
(function($) {
	var len = $("#slideshow li").length;
	var x = 0;
	$("#slideshow #total").text(len);
	$("#slideshow li:eq(0)").addClass("current");
	$("#slideshow li").each(function() {
		$(this).attr('rel', x);
		x++
	});	
	$("#next").click(function() {
		var current = $("#slideshow .current");
		var next = parseFloat(current.attr('rel'))+1;
		if(next==len) {
			return false;
		}
		$("#num").text(parseFloat(next)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==next) {
				$(this).addClass('current');
			}
		});									
	});
	$("#prev").click(function() {
		var current = $("#slideshow .current");
		var prev = parseFloat(current.attr('rel'))-1;
		if(prev<0) {
			return false;
		}
		$("#num").text(parseFloat(prev)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==prev) {
				$(this).addClass('current');
			}
		});									
	});					
})(jQuery)
</script>
</body>
</html>

Here is a demo:

Many things factor in to how your site performs, including the speed of your server, the amount of traffic on your site, how your site is coded, if your site is static or dynamic, and the list goes on. If your site has not been optimized then you are really doing yourself a disservice, especially now that your page rank might rely on it.

If you have a WordPress site, there are some great plugins to help you out. I like to use WP Super Cache to get things started. It is pretty easy to set up and works exceptionally well. Plus, the customer support is top notch, so if you have any issues you can just contact the author.

If you don’t use WordPress, you can still follow some of the steps below to get your site performing at its best.

First, let’s take a look at some free tools that are available online that can analyze your site and let you know exactly where the problems lie:

Pingdom Tools

Pingdom Tools will give you a breakdown of all the files that your site needs to load to render a page, and whether or not any of them is problematic. It can also save your tests so you can compare your site’s statistics against one another on different occasions.
http://tools.pingdom.com/

Web Page Test

Web Page Test provides a similar service to Pingdom Tools, but the results are a lot more elaborate. The test takes a bit longer but it’s well worth the wait. Your site will be graded on 6 different aspects of its performance: KeepAlive Enabled, Compress Text, Compress Images, Cache Static Content, Combine CSS/JS Files and Use of CDN. Once you are graded, you will also see why your site might have failed each test.
http://www.webpagetest.org/

Firebug & YSlow

If you have a Web site and you’re not aware of Firebug, you need to become aware of it immediately. It’s an amazing developer tool for Firefox that can make your life a hell of a lot easier. It offers tools such as an element inspector, CSS editor, and process console. To get your site optimized, install YSlow from Yahoo and you will have all the tools you need to test your site and find its weaknesses.
http://getfirebug.com/
http://developer.yahoo.com/yslow/

Once you’ve tested your site and you know what the problems are, you can start to make a few changes to help increase your site’s performance, which will in turn give your visitors a better experience and show search engines that you mean business.

You probably already know these tips, but just in case you don’t, pay attention because they are the basis of how you can optimize your site:

Optimize Images for the Web

If you plan on uploading an image to your site, make sure you’re not uploading the original 5 x 7 that has a resolution of 300dpi. Why? Because it’s such a large file that it will definitely slow down your site, if not crash it. That’s why all images must be optimized for the Web. If you have Photoshop, or any image editing software, you’ll have the option to export your image for the Web.

What does that mean? Well, first of all, you should probably aim for 72dpi, which is pretty much the Web standard. That will help bring your file size down. You should also save your photos as JPGs with a quality of around 50-60%, and your graphics as GIFs with a color range dependent on the graphic itself. If your image has a transparent background which doesn’t look too good as a transparent GIF, then you might want to make it a transparent PNG. That does increase the size of the file, so keep that in mind.

If you want to really get fancy, you can put together a CSS sprite so that all of your graphics and images are merged together into one file. This brings down the number of elements that your site has to load, but it does require a bit more effort in regards to the CSS used. Here is a CSS sprite I use on bavotasan.com:

If you don’t have any desktop software to optimize your images, you can always take advantage of Yahoo’s Smush.it, which allows you to upload an image file and have it optimized and returned to you. If you have YSlow installed, then you also have Smush.it included on the tools tab.

Put CSS at the Top & JavaScript at the Bottom

Placing your CSS at the top of your site makes sense, because you want to have your elements styled before they start to render. Placing JavaScript at the bottom also makes a lot of sense because you need your elements to render before they can be manipulated by your JavaScript. This has become a standard and should always be the way these files are included in your site.

Reduce the Number of HTTP Requests

An HTTP request occurs every time your site fetches a file that is required to render the page. So every image, every JS file and pretty much every element on your Web page requires an HTTP request. That’s why CSS sprites are a great idea. They reduce the number of times your site needs to fetch an image. Another great idea is combining your CSS files and your JavaScript files into one. So grab all of your site’s CSS (you can view it using Firebug), create one file and include it in your header. Same goes for your JavaScript files, but make sure you place the JS elements in the proper order or else they won’t work, eg. jQuery needs to load before you use any actual jQuery. And be sure to stick your JS file in your footer.

If you don’t plan on making any changes to your CSS or JS, you can even minify the files to make them as small as possible. There are many online resources to do this, but you also have everything you need if you already installed Firebug and YSlow. If you take a look at http://jquery.com/, you can see the difference between the minified version (24kb) and the development version (155kb). That’s a big difference.

The Hard Stuff

This is where things start to get a little more complicated. The following tips require a bit of knowledge of coding, or at least a willingness to attempt to do some things that you might not really understand.

Configure your ETags

According to Wikipedia, an ETag, or entity tag, “is one of several mechanisms that HTTP provides for cache validation, and which allows a client to make conditional requests.” If you don’t plan on using them, which most likely you won’t, then you need to remove them completely by adding the following to your .htaccess file.

FileETag none

If you don’t have an .htaccess file in your site’s root directory, then create one and upload it because you’re going to have to make a few modifications to it to get your site optimized.

Add Expires Headers

Expires headers will let everyone know that certain elements can be cached by the browser so they won’t need to be reloaded every time a visitor hits your site. Static elements should have a far future expiration date and dynamic elements need to be configured according to how you plan on using them. The following will add an expiration date of one month to all your image, CSS and JS files.

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

A2592000 (60*60*24*30) is a timestamp that equals one month. Remember, if you plan on modifying any files that have been cached with a future expiration date, you need to rename them or else visitors will not see the changes until they clear their browser cache or the old files expire.

Compress Components

Compressing things always ends up making them smaller and load faster, so implementing some form of compression on your components is a must. This optimization step might not work for you if your server does not have either mod_deflate or mod_gzip installed as part of Apache. You should contact your service provider and inquire about this to find out which of the following codes you should use.

mod_deflate:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

mod_gzip

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Content Delivery Network

It’s a little hard to believe, but the closer your visitor is to your server’s location, the faster they will receive your site elements. That’s where a CDN can come in handy. They provide multiple server locations for your site elements that will be accessed accordingly depending on where you visitors are located. This has been known to improve your site’s response time by up to 20%. The only problem, is it might cost you an arm and a leg to get it up and running. There are many CDNs popping up that are not as expensive as others, but to tell you the truth, this might not be a viable option unless your site is really bringing in the money, which in turn would make it worth having a CDN on your side.

Conclusion

When it comes down to it, running a successful Web site requires a lot of attention to certain things that you might never have considered. Being aware of optimization tools and techniques will definitely help you improve your site’s performance. Most importantly, it will get your site ready to be indexed by Google, Yahoo and many other search engines that rely on speed as a ranking factor.

Here is a list of 10 jQuery plugins that all web developers should take a look at.

Add the jQuery script between your head tags.

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

Here is the function.

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>

Here is the CSS.

<style>
 
div.fadehover {
	position: relative;
	}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
        }
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	}
 
</style>

And here is the body code.

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

All together you got something that looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
<style>
div.fadehover {
	position: relative;
	}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
        z-index: 10;
	}
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	}
</style>
</head>
 
<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html>

Test it out below:

NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

A similar effect can be easily accomplished using CSS and the :hover selector, but if you are new to jQuery, this tutorial is a good starting off point to familiarize yourself with how it works.

First you need to download jQuery. Grab the Production minified version off of their site. You will also need two images. I used the two below. I named them button.png and button-hover.png.

Now we can start to create the effect.

To make it all work, we first need to add the jQuery library script between the <head> tags.

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

Now lets create the function that will make it all work.

<script  type='text/javascript'>
$(document).ready(function(){
	$(".button").hover(function() {
		$(this).attr("src","button-hover.png");
			}, function() {
		$(this).attr("src","button.png");
	});
});
</script>

Last but not least, we need to add our image to the page.

<img src="button.png" alt="My button" class="button" />

The one thing you need to make sure is that the classname in the jQuery function (.button) matches the classname of the image tag (button).

With everything in place you should have a file that looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
	$(".button").hover(function() {
		$(this).attr("src","button-hover.png");
			}, function() {
		$(this).attr("src","button.png");
	});
});
</script>
</head>
 
<body>
<img src="button.png" alt="My button" class="button" />
</body>
</html>

Try out the effect below.

NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.