Amplitude is the name of the latest kickass product launched in co-op by UnlimitDesign and myself. It’s a Responsive Multipurpose / Business WordPress theme with an options panel that lets you set the color of every element, choose between 40+ fonts and create virtually an unlimited number of layouts using a combination of options and shortcodes.

Check out the promo video above and head over to ThemeForest to check out the demos: Amplitude – Responsive Multipurpose WordPress Theme

Christian Lundgren is an awesome designer and owner of UnlimitDesign. Together we’ve launched a premium HTML5 site template that’s great for design and photography studios.

The template, that comes in two versions, not only looks great but also has a bunch of neat JavaScript effects like a full width slideshow that supports images and video, a sliding footer, a really cool rollover effect for thumbnails in the portfolio section and much more.

Head over to ThemeForest and check it out: Voltage Minimalist Studio HTML5 Template

Motion

Dark and colorful theme with sweet transparency characteristics. Drop-down categories menu, 2-column layout and widget-ready footer and sidebar.

Pretty Spots

A highly widgetized (5 unique areas to include widgets!), dark theme. Validates XHTML Transitional. Works with WordPress 2.8.

Pixel

Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize.

Mystique

Feature-packed theme with a solid design, built-in widgets and a intuitive theme settings interface.

Colorful Paint

Sidebar and Widget Ready. Compatible with WordPress 2.9. W3C Validated CSS & HTML, Compatible with IE and Firefox.

Color3

Colorful clean and stylish theme with Special feature – choose out of five different colorful backgrounds. Two columns, right sidebar, dropdown menu and widget-ready.

Urban View

Unique dark grungy theme with two-column layout suitable for a wide range of bloggers. Tested in all major browsers.

Elegant Grunge

An unwashed yet crisp theme with a feature footer, styled image frames, a page template with a uniquely configurable sidebar and a photoblog tag page.

Smooth

This widget-ready theme is dedicated to writers. Its simplicity, light gray background and large fonts put the content ahead. Nothing useless, just fine typography and a touch of colors.

Pyrmont V2

This dark WordPress theme is widget-ready and supports sticky posts. It has a dropdown menu and you can link to your twitter account from the navigation bar.

And there you have it – 10 free WordPress themes I think you should have a look at.
Do you know of any other nice free WordPress themes? Share them with us in the comments.

The HTML Form

Let’s start by creating the HTML form. Below is the code that I have used for this tutorial.

<div id="contactForm" class="contactForm">
	<h1>Contact form</h1>
	<form action="php/submit-form.php" method="post">
		<ul>
			<li>
				<label for="name">Name *</label>
				<input type="text" name="name" id="name" class="txtFld" />
				<span id="errorName" class="formError"></span>
			</li>
			<li>
				<label for="email">Email *</label>
				<input type="text" name="email" id="email" class="txtFld" />
				<span id="errorEmail" class="formError"></span>
			</li>
			<li>
				<label for="subject">Subject</label>
				<input type="text" name="subject" id="subject" class="txtFld" />
				<span id="errorSubject" class="formError"></span>
			</li>
			<li>
				<label for="message">Message *</label>
				<textarea name="message" id="message" cols="30" rows="5" class="txtAra"></textarea>
				<span id="errorMessage" class="formError"></span>
			</li>
			<li>
				<input type="submit" value="Send" class="submit" id="submit" />
				<span id="formProgress" class="formProgress"></span>
			</li>
		</ul>
	</form>
</div>

Notice that I have added span tags with IDs after each text-field and one after the submit button. We’ll need these for error messages so don’t leave them out. The rest of it is a straight forward form marked up in an unordered list with its action set to submit-form.php and method set to post.

Once we have the HTML in place we need to style it using CSS. I’m not going to walk you through this step as you can style it as you wish. If you would like to see the styles I created for the form you can download the zip file above.

The PHP

We’ll need two separate PHP files, one for the AJAX call and one which will process the form if JavaScript is disabled. This way we ensure that the form works fine even for the low percentage of people surfing with JavaScript turned off. For the purpose of this tutorial I’ve made both these files identical but you can, and really should, change the “non-ajax” PHP script, submit-form.php, to handle the process better than just outputting text on an empty page.

Here is the PHP code we need for the AJAX call. I’ve saved this code in a file named submit-form-ajax.php

<?php
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
	die('Error: Missing variables');
}
$name=$_POST['name'];
$email=$_POST['email'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$to='your@email.com';
$headers = 'From: '.$email."\r\n" .
	'Reply-To: '.$email."\r\n" .
	'X-Mailer: PHP/' . phpversion();
$subject = $subject;
$body='You have got a new message from the contact form on your website.'."\n\n";
$body.='Name: '.$name."\n";
$body.='Email: '.$email."\n";
$body.='Subject: '.$subject."\n";
$body.='Message: '."\n".$message."\n";
if(mail($to, $subject, $body, $headers)) {
	die('Mail sent');
} else {
	die('Error: Mail failed');
}
?>

The first few lines of code are an if statement to ensure that the name, email and message fields weren’t left blank by the user. If any of them are blank the script will terminate and output an error.

After that we are assigning the values of the fields to variables ($name, $email, $subject and $message) for easier use later in the script.

In the line after that we set a variable called $to. It’s value is the email address where we want the form sent.
Note: Don’t forget to change your@email.com to your email address.

After that we are simply setting the values for the subject and body of the email.

In the last few lines we are using PHP’s mail function in an if statement. Now if the email is sent the script will output the message “Mail sent” or else, if it fails, it will terminate and output an error message. We’ll be making use of the “Mail sent” message later on in our jQuery AJAX call.

The jQuery & AJAX

Now lets get to the jQuery and AJAX part of this tutorial. We’ll be using jQuery to display messages to the user, validate the form on the client side and to submit the data using AJAX.

Below is the jQuery code I have written to do all of the above. It might look like quite a bit but don’t worry I’ll walk you through it.

$(document).ready(function() {
	$('#contactForm #submit').click(function() {
		// Fade in the progress bar
		$('#contactForm #formProgress').hide();
		$('#contactForm #formProgress').html('<img src="images/ajax-loader.gif" /> Sending&hellip;');
		$('#contactForm #formProgress').fadeIn();
		// Disable the submit button
		$('#contactForm #submit').attr("disabled", "disabled");
		// Clear and hide any error messages
		$('#contactForm .formError').html('');
		// Set temaprary variables for the script
		var isFocus=0;
		var isError=0;
		// Get the data from the form
		var name=$('#contactForm #name').val();
		var email=$('#contactForm #email').val();
		var subject=$('#contactForm #subject').val();
		var message=$('#contactForm #message').val();
		// Validate the data
		if(name=='') {
			$('#contactForm #errorName').html('This is a required field.');
			$('#contactForm #name').focus();
			isFocus=1;
			isError=1;
		}
		if(email=='') {
			$('#contactForm #errorEmail').html('This is a required field.');
			if(isFocus==0) {
				$('#contactForm #email').focus();
				isFocus=1;
			}
			isError=1;
		} else {
			var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
			if(reg.test(email)==false) {
				$('#contactForm #errorEmail').html('Invalid email address.');
				if(isFocus==0) {
					$('#contactForm #email').focus();
					isFocus=1;
				}
				isError=1;
			}
		}
		if(message=='') {
			$('#contactForm #errorMessage').html('This is a required field.');
			if(isFocus==0) {
				$('#contactForm #message').focus();
				isFocus=1;
			}
			isError=1;
		}
		// Terminate the script if an error is found
		if(isError==1) {
			$('#contactForm #formProgress').html('');
			$('#contactForm #formProgress').hide();
			// Activate the submit button
			$('#contactForm #submit').attr("disabled", "");
			return false;
		}
		$.ajaxSetup ({
			cache: false
		});
		var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&message=' + message;
		$.ajax({
			type: "POST",
			url: "php/submit-form-ajax.php",
			data: dataString,
			success: function(msg) {
				// Check to see if the mail was successfully sent
				if(msg=='Mail sent') {
					// Update the progress bar
					$('#contactForm #formProgress').html('<img src="images/ajax-complete.gif" /> Message sent.').delay(2000).fadeOut(400);
					// Clear the subject field and message textbox
					$('#contactForm #subject').val('');
					$('#contactForm #message').val('');
				} else {
					$('#contactForm #formProgress').html('');
					alert('There was an error sending your email. Please try again.');
				}
				// Activate the submit button
				$('#contactForm #submit').attr("disabled", "");
			},
			error: function(ob,errStr) {
				$('#contactForm #formProgress').html('');
				alert('There was an error sending your email. Please try again.');
				// Activate the submit button
				$('#contactForm #submit').attr("disabled", "");
			}
		});
		return false;
	});
});

OK, lets start with the first line of code, $(document).ready(function() {. This is jQuery’s handy little function to make sure that the rest of our script is run only once the document has loaded. So, basically, we want all our functions inside this jQuery function.

On the second line, $(‘#contactForm #submit’).click(function() {, we are binding an event to the submit button which is referenced by its ID, submit. Inside this function we write the code that is to be executed once the form is submitted.

In the next three lines of code we are displaying a message to the user letting them know that the form is being processed. First we hide the progress bar with $(‘#contactForm #formProgress’).hide();. Next we add our message to it with $(‘#contactForm #formProgress’).html(‘<img src=”images/ajax-loader.gif” /> Sending…’); and lastly we fade it in with $(‘#contactForm #formProgress’).fadeIn();.

We want to disable the submit button whiles the form is being submitted just to make sure the user doesn’t submit it twice. The line $(‘#contactForm #submit’).attr(“disabled”, “disabled”); takes care of that for us.

The next line, $(‘#contactForm .formError’).html(”);, hides any previous error messages.

Now we’re ready to start validating the user’s inputs. So the first thing we’ll do is create two variables that we’ll use in the script for validation. The line var isFocus=0; creates and sets the value to “0″ for the first of the two variables. We’ll use this variable to help us keep track of which input field to set focus on if there is a validation error. The next line, var isError=0;, creates the second variable we need. We’ll use this variable to see if there has been a validation error so we can stop the form from submitting and display the necessary errors.

To validate the user’s inputs we need to pull the data from the form so that’s what we do in the next four lines, get the user’s inputs and store them in variables. var name=$(‘#contactForm #name’).val();, var email=$(‘#contactForm #email’).val();, var subject=$(‘#contactForm #subject’).val(); and var message=$(‘#contactForm #message’).val();.

Alright, it’s now time to validate our first field and that’s what we are doing in the following block of code…

if(name=='') {
	$('#contactForm #errorName').html('This is a required field.');
	$('#contactForm #name').focus();
	isFocus=1;
	isError=1;
}

First we are checking if the user has left the “Name” field empty, if(name==”) {, since this is a required field that would result in a validation error. If the field is empty we display an error after the input field in the form with $(‘#contactForm #errorName’).html(‘This is a required field.’); and set the focus to that field with $(‘#contactForm #name’).focus();. Since we have set focus to a field we update the value of the isFocus variable to “1″. Now we can check this variable when we validate the next field and only set focus to that field, if there is an error, if isFocus is “0″ because if it’s “1″ that would mean we have already set focus on a field and don’t want to change it. We also set isError to “1″ if there is an error so we later can stop the script from submitting the form.

Next lets look at the code that will validate the “Email” field. This block of code is bigger than the previous one as we’ll also be checking to see if isFocus has been updated as well as if the user has entered a valid email address.

if(email=='') {
	$('#contactForm #errorEmail').html('This is a required field.');
	if(isFocus==0) {
		$('#contactForm #email').focus();
		isFocus=1;
	}
	isError=1;
} else {
	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	if(reg.test(email)==false) {
		$('#contactForm #errorEmail').html('Invalid email address.');
		if(isFocus==0) {
			$('#contactForm #email').focus();
			isFocus=1;
		}
		isError=1;
	}
}

So, the first line, if(email==”) {, checks if the “Email” field is empty and then if it is the second line, $(‘#contactForm #errorEmail’).html(‘This is a required field.’);, displays an error message after the input field in the form, same as we did with the “Name” field. If the “Email” field is empty we also check the value of isFocus on the next line, if(isFocus==0) {, and only change the focus to the “Email” field if its value is “0″ with $(‘#contactForm #email’).focus();. On the line after that, isFocus=1;, we set the value of isFocus to “1″. Next we update isError and set it to “1″.

So far we have checked if the “Email” field is empty and done the needful if it is. Now we need to validate the data in the “Email” field if it’s not empty and make sure it’s a valid email address. That is what we do in the else statement. First we create a variable called “reg” and store the regular expression in it, var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;. Next we test the value of the email variable against the regular expression in the reg variable, if(reg.test(email)==false) {, and display an error if it’s not a match, $(‘#contactForm #errorEmail’).html(‘Invalid email address.’);. Then we do the same check for focus as earlier and set isError to “1″.

The last field we need to validate is the “Message” text box. So we check if it is empty with if(message==”) { and display an error message with $(‘#contactForm #errorMessage’).html(‘This is a required field.’); if it is. Then we do the check for isFocus and update isError just like we did for the previous two fields.

Now we are done checking and validating all the required input fields of the form.

The next step is to determine whether there have been any validation errors. We’ll use our handy isError variable to do this check. We know that we have an error if the value of isError is “1″ so we’ll check that in an if statement and stop the script from submitting the form if that is the case. Lets have a look at the code we are using for this…

if(isError==1) {
	$('#contactForm #formProgress').html('');
	$('#contactForm #formProgress').hide();
	$('#contactForm #submit').attr("disabled", "");
	return false;
}

So, our if statement checks if isError is “1″, if(isError==1) {, and if it is it will clear and hide the progress bar, which so far has been displaying the message “Sending…”, with the lines $(‘#contactForm #formProgress’).html(”); and $(‘#contactForm #formProgress’).hide();. Then we activate the submit button with $(‘#contactForm #submit’).attr(“disabled”, “”); and finally we stop the script from continuing with return false;.

Alright, so we have now validated all the fields and stopped the script if there are any errors. Next step is to submit the form with AJAX if there aren’t any errors, so lets get to it.

One thing I like to do is use jQuery’s $.ajaxSetup function to set default settings for AJAX calls. In this function we’ll set “cache” to “false” which will force the pages that we request to not be cached by the browser.

$.ajaxSetup ({
	cache: false
});

That’s it, now all future AJAX calls will have this setting. Below is our AJAX call to submit the form.

var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&message=' + message;
$.ajax({
	type: "POST",
	url: "php/submit-form-ajax.php",
	data: dataString,
	success: function(msg) {
		if(msg=='Mail sent') {
			$('#contactForm #formProgress').html('<img src="images/ajax-complete.gif" /> Message sent.').delay(2000).fadeOut(400);
			$('#contactForm #subject').val('');
			$('#contactForm #message').val('');
		} else {
			$('#contactForm #formProgress').html('');
			alert('There was an error sending your email. Please try again.');
		}
		$('#contactForm #submit').attr("disabled", "");
	},
	error: function(ob,errStr) {
		$('#contactForm #formProgress').html('');
		alert('There was an error sending your email. Please try again.');
		$('#contactForm #submit').attr("disabled", "");
	}
});

First we’re creating a variable called dataString in which we are storing our parameters. We’ll use this soon in our AJAX call. Once our parameters are setup we use jQuery’s $.ajax function to make our AJAX request. Inside this function we set the request method to “post” with type: “POST” and the URL we want to request with url: “php/submit-form-ajax.php”. Next we pass our parameters with data: dataString where dataString is the variable we created earlier.

The next setting is success in which we create a function telling jQuery what to do if the request is successful. The function gets an argument passed back which is the data returned from the script we called. In the function we check if the data returned is the string “Mail sent” with if(msg==’Mail sent’) { and if it is we update the progress bar to display the message “Message sent.” with the line $(‘#contactForm #formProgress’).html(‘<img src=”images/ajax-complete.gif” /> Message sent.’).delay(2000).fadeOut(400);. The message stays on the screen for two seconds and then fades out, delay(2000) “pauses” the script for 2 seconds and fadeOut(400) fades out the message in 400 milliseconds. We also clear out the “Subject” text field and the “Message” text box in the form, so the user can’t send a second message with the same values, with the lines $(‘#contactForm #subject’).val(”); and $(‘#contactForm #message’).val(”);.

If the data returned is not “Mail sent” that would mean we had an error. If that is the case we clear the progress bar with $(‘#contactForm #formProgress’).html(”);, and show the user an error, alert(‘There was an error sending your email. Please try again.’);.

The next line, $(‘#contactForm #submit’).attr(“disabled”, “”);, enables the submit button again.

The last setting we need for the AJAX call is error. Here we create a function that tells jQuery what to do if the AJAX request wasn’t successful. We’ll do the exact same thing as above, clear the progress bar, display an error message to the user and then enable the submit button.

The last line of code that we need is return false; which stops our form from being submitted the traditional way.

The End

That’s it, we’re done. I hope you enjoyed this tutorial and learned a trick or two. If you’re unclear about anything you can leave a comment below and I’ll do my best to explain.

In this very simple tutorial I’ll show you how to use jQuery to create a nice effect that you can use to slide in your contact form, for example, from above the page.

You can check out the demo here before we start so you know what we’re going to be doing.

You can also download a zip file containing all the files used in this tutorial.

Alright, let’s start by getting jQuery, if you don’t already have it. Go to www.jquery.com and grab the latest version of the library.

Now create your HTML document and add a div for the contact form. I’m giving it an id of “panel”, you can name it whatever you want but we’ll need an id so we can access it. Here is how my markup looks.

<div id="panel">
	[INSERT YOUR CONTACT FORM HERE]
</div>

Keep this div on top of all your other markup, just below your body tag.
I’ve just written “[INSERT YOUR CONTACT FORM HERE]” but this is obviously where you need to enter your markup for the contact form.

Great, now that you have your contact form ready we’ll soon be hiding it with display:none so that it’s hidden when the page loads. But before starting with the CSS let’s add a link that the users can click to slide the form in and out. Just like with the div we’re using as a container for the contact form, we’ll need an id on this link too. I’m also adding a class to the link so that I can change the class on the fly, when the form is out. Here is the markup I have used.

<a href="#" class="contact" id="contact-toggle">Contact</a>

I’m just placing the link below the contact form div, I’ll be floating it to the right once we start with our CSS, but you can place it wherever you want to, e.g. in you navigation.

This is all the markup I’m going to be using for this example. Here is the complete document, excluding doctype etc.

<html>
<head>
<title>jQuery Slide Contact Form</title>
</head>
<body>
<div id="panel">
	[INSERT YOUR CONTACT FORM HERE]
</div>
<a href="#" class="contact" id="contact-toggle">Contact</a>
</body>
</html>

Now let’s start with the CSS. I have created a stylesheet, named it “style.css” and saved it in a folder called “css” in the same folder as I have saved the HTML document above, I’ll be calling this folder the root folder from now. So, now I can link the stylesheet to the HTML document like below.

<link rel="stylesheet" type="text/css" href="css/style.css" />

The first thing I have done, as I usually do, is get rid of the margins and paddings of the body element. I have also changed the font to 12px Verdana as I prefer it to the browsers’ default choice of font.

body {
	margin:0px;
	padding:0px;
	font:12px Verdana;
}

Next in my stylesheet are the styles for the contact form container div. The one we gave an id of “panel”.

#panel {
	height:500px;
	background-color:#322626;
	color:#fff;
	display:none;
}

I gave my div a height of 500px. You can assign whatever value you require to fit your contact form here. I’ve also given it a background-color and a color. These values would obviously change according to your design, these are just the values I chose to use. The last line is an important one, setting display:none ensures that the contact form is hidden when the page loads.

Now I styled my link to look a little better than blue, underlined text.

.contact {
	float:right;
	width:150px;
	height:40px;
	margin-right:50px;
	text-indent:-9999px;
	background:#322626 url(../images/contact-sprite.gif) 0px -40px no-repeat;
}

Most of this class is pretty self-explained.
Setting the “text-indent” to -9999px will place the link text way off the viewport, so we won’t see it but it’s still there incase CSS is turned off and also for accessibility purposes.
For the background I’m using a technique called CSS Sprites. If the background style isn’t making sense to you, you can read my tutorial on CSS Sprites.

You can grab the sprite image I created here if you want to use the same one whiles following. Save this image in a folder called “images” in your root folder.

We’re using sprites because our link has a hover and “active” state. The hover state is simply handled by CSS like this.

.contact:hover {
	background:#322626 url(../images/contact-sprite.gif) 0px 0px no-repeat;
}

Now for the “active” state, which will be used when the contact form is out, we’ll use jQuery to change the CSS class on the link. Here is the CSS for it, we’ll get to the jQuery bit in just a moment.

.contact-active {
	background:#322626 url(../images/contact-sprite.gif) 0px -120px no-repeat;
}
.contact-active:hover {
	background:#322626 url(../images/contact-sprite.gif) 0px -80px no-repeat;
}

That’s all the CSS I’m using for this example, here is the complete CSS document I’m using.

body {
	margin:0px;
	padding:0px;
	font:12px Verdana;
}
#panel {
	height:500px;
	background-color:#322626;
	color:#fff;
	display:none;
}
.contact {
	float:right;
	width:150px;
	height:40px;
	margin-right:50px;
	text-indent:-9999px;
	background:#322626 url(../images/contact-sprite.gif) 0px -40px no-repeat;
}
.contact:hover {
	background:#322626 url(../images/contact-sprite.gif) 0px 0px no-repeat;
}
.contact-active {
	background:#322626 url(../images/contact-sprite.gif) 0px -120px no-repeat;
}
.contact-active:hover {
	background:#322626 url(../images/contact-sprite.gif) 0px -80px no-repeat;
}

Now let’s get to the fun part. First make a copy of the jQuery file you downloaded and place it in a folder called “js” in your root directory. Rename your jQuery file to “jquery.js”.

Link the jQuery script to your HTML document like this.

<script type="text/javascript" src="js/jquery.js"></script>

And below that we add our magical code to handle to slide effect.

<script type="text/javascript">
$(document).ready(function(){
	$(".contact").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("contact-active");
		return false;
	});
});
</script>

That’s it. Were you expecting this to be complicated?

$(".contact").click(function(){
	. . .
});

This means that when the element with id contact-toggle, our link, is clicked we want to run some code.

The code we want to run is…

$("#panel").slideToggle("slow");

…which will make our div slide in/out.

I’ve also added the line…

$(this).toggleClass("contact-active");

…which changes the class of our link. This is so our link can look different when the form is out.

return false;

This just makes sure our link doesn’t try to load a page.

That’s it. That’s all there is to it. So, basically, all you need to do is create a form, wrap it in a div. Give the div a height and set its display to none. Load in jQuery and add those 7 lines of jQuery code.

I hope you enjoyed this tutorial!

For this post I have shortlisted 5 plugins that I feel are really useful and should be installed on every blog.

I’m not trying to say that these are the only useful plugins, I’m sure you’ll find a lot more out there but these are the ones I came across and really liked.

Without further ado I present you with my list of 5 really useful WordPress plugins!

These first two are time savers. They’ll automatically do two things that you should always do after publishing a post.

Google XML Sitemaps

This WordPress plugin will create and update an XML Sitemap for your blog everytime you publish or update a post.
It will also notify all major search engines every time there is a change in your Sitemap.
If you don’t know about XML Sitemaps you really should take a minute to read about it. You can read about XML Sitemaps here.

After publishing a post I also tweet about it on Twitter to let the handful of followers I have know that I have put up some new content, and that brings us to the next item in my list.

Feed2tweet

This is a really simple plugin that will automatically tweet your new WordPress posts to your Twitter account.
You can customize your tweet messages and it supports multiple URL shortening services (tinyurl, is.gd, bit.ly).
There are other plugins that do this but I chose this one because of it’s simplicity, this is all it does.

With these two plugins under the hood, I save at least 10 minutes per post! Most importantly, the process has been automated so I can forget about it and focus on other things.

The next item on my list will slightly improve your blogs usability.
The pagination on most WordPress blogs are just… well… no good and that’s why I suggest using this next plugin.

WP-PageNavi

This little plugin adds a more advanced paging navigation to your WordPress blog.
You’ll need to make a slight change to your template, add a line of code, but it’s totally worth it.

The next 2 plugins are meant to increase interactivity on your blog.
I personally feel that the first one of these two is more a must have than just a useful plugin, but that’s just my opinion.

Subscribe to Comments

This WordPress plugin enables commenters to sign up for e-mail notification of subsequent comments on a post.
It also allows them to unsubscribe from future notifications so don’t worry about that.
With this plugin it will be easier to start a conversation in your post comments and I definitely think you should install this one.

WP Greet Box

This plugin lets you show your visitors a different greeting message depending on their referrer URL.
Greeting messages automatically get inserted into the top of your posts and you can, for example, suggest your new visitors to subscribe to your RSS feed.
You can also set a timeout to forget a visitor so you do not keep nagging your visitors with greeting messages.

That’s it! That’s my list of really useful WordPress plugins. What did you think of it? Do you know of any other plugins that you think are useful?
Leave a comment and let me know what your thoughts.

Groject ImageSwitch jQuery plug-in

This jQuery plug-in will let you use neat effect, such as fade in, scroll in, flip in etc., for switching between images.

s3Slider jQuery plugin

This jQuery plug-in is used for creating a smooth slideshow.
Check out the demonstration page to see some really good looking examples.

How To Add Tweeting With Short URL Functionality To A Website (With PHP)

This is a great way to help the readers of a website share/tweet a content at Twitter easily.

Get a Following on Twitter by Giving

“… By providing value to your followers, you’ll receive mentions on other people’s posts – which in turn, build your followers naturally. …”

WP Super Cache

Here is a WordPress plug-in that should help your server cope with a front page appearance on Digg.com or other social networking site.

10 Ways to Automatically & Manually Backup MySQL Database

It’s important to backup your data. This article should point you in the right direction of doing just that.

ReCron – Free Online Web Cron Service

Many of us don’t have access to setting up cron jobs. This is a pretty good solution, the best free one that I’ve come across so far.

Todoist – a task manager that’s useful, fast and easy to use

Todoist is the best way to stay organized, that’s what they themselves claim.
I’ve been using this app everyday for the past few months and I thinks it’s great.

What It Means to Copyright a Website

What exactly does it mean to copyright a website and what protection does it provide?

There’s always time to launch your dream

This is a must read for anyone who dreams of being an entrepreneur but just can’t seem to get things rolling.

Free Icons: Function Icon Set, 128 Completely Free Icons

The Function Icon Set consists of 128 glossy 48×48px icons in .png format.
The set contains icons for some of the main Social Media Icons, arrows, boxes, coffee cups, speech bubbles, cameras, credit cards, mail, database, image and more.
These icons are free and can be used in any project.

Free Icon Pack: Bevel Dark Social Icons

This icon pack includes 10 icons featuring the logos of popular social bookmarking sites; BlinkList, Del.icio.us, Design Float, Digg, Dzone, Flurl, Mixx, Reddit, Stumble Upon and Technorati.
All these icons are available in 32x32px, 48x48px, and 64x64px and are in .png format.
This icon pack can be used in personal and commercial projects.

Free Social Icon Pack: Bevel Lite

This icon pack includes 10 icons featuring the logos of popular social bookmarking sites; BlinkList, Del.icio.us, Design Float, Digg, Dzone, Flurl, Mixx, Reddit, Stumble Upon and Technorati.
All these icons are available in 32x32px, 48x48px, and 64x64px and are in .png format.
This icon pack can be used in personal and commercial projects.

Flavours Icon Set And Cute Tweeters Icon Set (2 different icon sets)

The Flavour Icon Set consists of 177 48×48px icons in .png format.
The set includes buttons and icons for RSS, screens, charts, mail, boxes, documents and more.
You can freely use this set for both your private and commercial projects.

This Twitter Icon set includes 8 different icons in 128×128 pixels, 256×256 and 512×512 and are in .png format.
You can freely use this set for both your private and commercial projects.

Free web development icons

This set contains 26 16x16px colored and grey icons in .bmp, .gif, .icns, .ico, .png and .tif format.

70 Free Button Icons

This set includes 71 buttons in blue, green, grey, pink and yellow.
These icons are free for personal,non-commercial use.

Free web 2.0 RSS icons

This set consists of some really nice looking RSS icons.
These are available in 16x16px and 32x32px and in .icns, .ico, .png, .tif and .psd format.

PI Diagona Icons Pack

The PI Diagona Icon Pack contains 200 10x10px and 16x16px icons all in .png format.
You should find anything you need for your web application in this pack.

90 Free Small Icons

This pack contains 92 16x16px icons in .png format suitable for web applications.

Free eCommerce icons

This is an amazing icon set for eCommerce projects. It contains 32 glossy 32x32px icons.
This icon set is released under the GNU Lesser General Public License (LGPL).

Get over to SitePoint and check out their great 5-for-1 Sale!

It’s become quite common to replace “@” with ” [at] ” and “.” with ” [dot] ” when typing out your email address on the net. This way I can type out my email address like farid [at] faridhadi [dot] com which is readable to humans but doesn’t look like an email address to the bots.

You could just wrap that up in a mailto link and be done with it but that would just mean that you are letting the bad guys win, so don’t! It’s bad usability! Your precious visitors will have to manually replace ” [at] ” with “@” and ” [dot] ” with “.”. Instead, lets use some good JavaScript and make it a nice, user-friendly link, not letting your visitors experience any inconvenience and letting them comfortably send you an email.

If you have a look at my “Contact Me” page you’ll see the line “Use the form below to get in touch with me or send me an email at [my email address]” where [my email address] is a fully functional mailto link. Now, if you have a look at the source code of the same page you’ll see “Use the form below to get in touch with me or send me an email at <span id=”hidden”>farid [at] faridhadi [dot] com</span>”. This replacement is done with JavaScript, and since it is, the source code will be left as it is. This means the spam bots will see farid [at] faridhadi [dot] com, and hopefully not recognize it as an email address, whiles my visitors will see my email address as a nice little mailto link.

Let me show you how it’s done!
The markup for this is simple, as I’ve already shown you above.


Use the form below to get in touch with me or send me an email at <span id="hidden">farid [at] faridhadi [dot] com</span>

Now all we need to do is get the element with ID “hidden” and replace it’s contents with my email address in a mailto link. Here is the JavaScript I wrote to take care of that, making sure not to type out the email address in its full form by creating a variable and adding the markup to it bit by bit. This way the bots should not be able to figure out that it’s an email address.


<script type="text/javascript">
var str='<a ';
str+='href';
str+='="mailto';
str+=':farid';
str+='@';
str+='farid';
str+='hadi.';
str+='c';
str+='o';
str+='m"';
str+='>farid';
str+='@';
str+='farid';
str+='hadi.';
str+='c';
str+='o';
str+='m<';
str+='/a';
str+='>';
document.getElementById('hidden').innerHTML=str;
</script>

As you can see, the function is very simple and straight forward. This technique works fine if you need to protect a single or just a few email address that you know, like in the case of a contact page. You can easily add more addresses by adding multiple spans in your markup with an id that increases for every address like hidden-1, hidden-2 and so on and updating the JavaScript to replace them as your situation requires.

Does this technique have any weaknesses?
According to me, the only weakness is the fact that we are typing out the email address as foo [at] bar [dot] com and since it’s become quite common to do so the bad guys will probably, if they haven’t already, teach their evil bots to recognize that as an email address.

I’ll let you know if I start getting spammed after this post =)

What are your thoughts on this? Do you use another technique to display your email address? Do you try to protect it at all? Share your thoughts with us in the comments.