Here are some great WordPress plugins for bloggers:

All in One SEO Pack

Optimizes your WordPress blog for Search Engines (Search Engine Optimization). If you don’t know much about SEO then this plugin will help you set up some basic SEO for your site to help it get indexed more effectively.

Get this plugin »

Google XML Sitemaps

Having a proper sitemap will also improve your website’s SEO. This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Get this plugin »

Contact Form 7

Most of us would like to have a contact form on our contact page and this plugin is by far the most popular WordPress Contact Form plugin. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Get this plugin »

TDO Mini Forms

Many people haven’t heard of this plugin before but it’s quite a good one. Have you noticed the community news feeds featured on certain websites? You can allow your visitors to post community news to your site using TDO Mini Forms. This plugin allows you to add highly customisable forms that work with your WordPress Theme to your website that allows non-registered users and/or subscribers (also configurable) to submit and edit posts and pages.

Get this plugin »

AddToAny: Share Button

A great little plugin to help your visitors promote your posts through social media sharing. This WordPress plugin helps people share, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Google Buzz, Digg, Delicious, and well over 100 more social bookmarking and sharing sites.

Get this plugin »

TweetMeme Button

Twitter is one of the best ways to promote your blog posts so you need to make sure that you have a “retweet” button on your page. The TweetMeme Retweet button is a very popular Retweet button used by some of the biggest websites in the world including Techcrunch.com, PerezHilton.com, Break.com, CNET.com, Wired, Time Magazine and hundreds of other massive brands, in total it is installed on over 100,000 websites around the globe.

Get this plugin »

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without loosing it’s formatting or making any manual changes. This is probably the best syntax highlighting plugin I have found as it looks nice, supports many programming languages and also allows users to copy code to their clipboard with a single click.

Get this plugin »

WP-PageNavi

This plugin allows you to add more advanced pagination to your WordPress blog. Basically instead of having the “previous posts” button at the bottom of your homepage, you can list a bunch of your pages with next and previous links.

Get this plugin »

WP Super Cache

If your website is experiencing a heavy load of visitors then this plugin will definitely come in handy. WP Super Cache basically generates static html files from your dynamic WordPress blog. After a html file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. It can sometimes cause certain other plugins to perform strangely when “Super Cache” is turned on so you might want to test it out first.

Get this plugin »

Don’t add too many plugins

Before you go adding every plugin under the sun to your WordPress website, just remember that each plugin requires files to be requested every time someone visits your website. So the more plugins you have, the more your website may get bogged down. Heavier websites generally won’t display very quickly when they are experiencing higher levels of visitors (You can analyse the speed at which your site loads using YSlow). So try to make sure you only use the plugins that you really need.

Which plugins have you found useful?

This is what your button will look like. Firstly you need to figure out where you would like to place your button on your web page. You then copy and paste the following code snippet into your HTML and be sure to replace the sample URL with your own web page URL.

<iframe src="http://www.facebook.com/plugins/like.php?href=http://sample.com
&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" id="facebook-like">
</iframe>

If you have a WordPress blog then you could replace the sample URL with the following code which will get the current URL of your page.

<?php echo rawurlencode(get_permalink()); ?>

As an example let’s assume that your website is 800px wide and 400px high. Here is the HTML along with the CSS to center this website exactly in the middle of the page horizontally and vertically.

The HTML:

<div class="center">
Your website goes here.
</div>

The CSS:

.center {
width: 800px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -200px;
}

Basically you just need to make sure that the left margin is half of your website width and that the top margin is half of the website height. If you only want to center your website horizontally then simply remove the “top:50%” and “margin-top:-200px” from the CSS.

(Awesome meditation image by Emils Blums).

First of all you need to decide where you want your latest tweet to go on your website, then copy and paste the following HTML there.

<div id="twitter_update_list"></div>

Then simply copy and paste this JavaScript at the bottom of your website before the </body> tag.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/blah.json?callback=twitterCallback2&amp;count=1"></script>

Don’t forget to replace “blah” in the code with your own Twitter account name. You can also change the “count” to  display more of your tweets. Now all you need to do is style up your tweet with a bit of simple CSS and you’re done!

About the Form.Validator class:

The Mootools Form.Validator class evaluates an entire form against all the validators that are set up, firing events when inputs fail validation. There are many built in validators including: isEmpty, required, minLength, validate-numeric, validate-alpha, validate-email and validate-url to help you validate your form. You can also create your own validators if you need to. These validators can very easily be added as classes to your form inputs in your HTML and before you know it your form will have validation.

Setting up MooTools Form Validation

As an example let’s say that you have a contact form that you want to validate. Your contact form has three fields; name, email address and message. You want to make sure that the user enters something into each field before the form can be submitted and you also want to make sure that the email address they enter is valid. Here’s how to setup your contact form in a few simple steps.

Contact Form HTML:

Below is a simple contact form with three inputs (name, email and message) and a submit button. Since I want all these inputs to be “required” inputs, I just add the “required” class to the inputs. The email address also needs to be checked that it is a valid email address, to do this I similarly add a “validate-email” class to this input. There are lots of other validators you can use too.

<form method="post" action="sendform.php" id="contact-form">

	<label for="name" >Name:</label>
	<input type="text" name="name" id="name" class="required" />

	<label for="email">Email Address:</label>
	<input type="text" name="email" id="email" class="required validate-email" />

	<label for="email">Message:</label>
	<textarea name="message" id="message" class="required"></textarea>

	<input type="submit" name="submit" value="Submit" />

</form>

Include the Form.Validator class:

The Form.Validator class is actually not part of the standard MooTools Core. As well as the core you will need to download MooTools “More”. You don’t need to download all of it, you can save some space by using the More Builder and simply checking the check box for the Form.Validator option. Once you have downloaded your “More” file you need to include it in your website head as follows:

<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>

Usage:

The last thing to do is initialise your Form.Validator so that your form will get validated. This is done by adding the following JavaScript to your website where “contact-form” is the ID of your contact form. If you already have a domready function then simply add the Form.Validator initialisation to your existing domready function.

window.addEvent('domready',function() {
    var myFormValidator = new Form.Validator($('contact-form'));
});

That's it! Now just test out your form and you should see some error messages pop up.

Here is an example of the first implementation of a CSS Reset way back in the day. This reset basically stripped margins and padding from all elements on the page which became a problem as certain elements like form elements needed their margins and padding. So it’s probably a good idea to stay away from this global reset but it did pave the way for some great CSS Resets.

/* Global Reset */
* { margin:0; padding:0; }

The Meyer CSS Reset

These days, one of the most popular CSS Resets is the Meyer Reset created by Eric Meyer. The Meyer Reset acts as a starting point for the CSS styles of a website and can be tweaked depending on your website requirements. As you can see in the Meyer Reset CSS below, many elements are stripped of their default padding and margins. List items are even stripped of their styles to force you to give them an appropriate style.

If you are looking for a CSS Reset to tighten up your CSS you can use the Meyer Reset below. Simply copy and paste the CSS into the top of your style sheet and you’re ready to go! There are also many other CSS Resets out there which you can review and compare.

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Here is the compressed version of the Meyer Reset:

Here is the Meyer Reset in one line for those of you who like to keep your reset tucked away nicely at the top of your CSS file.

/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

Simply add the following CSS to your style sheet and the dotted borders surrounding your links will be gone.

a:active {
    outline: none;
}

What is @font-face?

@font-face is basically a CSS rule that allows you to embed a font in your website so that viewers of your site will see that font even if it’s not installed on their computer. There is no JavaScript, Flash or images needed as this method basically uses a single font file that you upload onto your server.

Why use @font-face?

@font-face is a simple and elegant way to embed a font in your website and is in most cases superior to all other font embedding methods. It requires only the font you wish to use along with some CSS. Best of all @font-face is fully compatible with all major browsers. It’s search engine friendly and setting it up is quick and easy. No coding required. Sounds too good to be true doesn’t it?

How to use @font-face

You basically just need to buy/download the font you wish to use (you must have a license to use the font) and then add the following rule to your style sheet to reference your font. As an example let’s embed the Action Man font into our website.

@font-face {
 font-family: ActionMan;
 src: url(/font/ActionMan.ttf) format("truetype");
}

Now that your font is embedded in your website you can use it as you would any other font. Lets use our embedded font on our h1 tags like so.

h1 {font-family: ActionMan, Verdana, Helvetica, sans-serif;}

In order for your font to be cross browser compatible you will need a few different font file types for different browsers. Font Squirrel is a great resource that has made it very easy to use @font-face on your website by providing @font-face kits. These kits basically contain the original TrueType or OpenType fonts for Firefox, Opera, Safari and Chrome along with the EOT fonts for Internet Explorer. There are lots of great fonts to choose from, many of which are free for commercial use.

Issues with @font-face

Surprisingly, there are not really any issues with using @font-face to embed fonts in your website. But there are two things to be aware of. Firstly, your font will need to be downloaded by your website viewers which will usually cost you around 30KB of bandwidth for a typical font (which isn’t much at all). Secondly, as your font loads your website viewers may sometimes see the default font flash first for a second on the web page. Most people can live with that.

@font-face is quick to setup, simple to use, light weight, SEO friendly and browser compatible. The best method I have come across to embed a font in a website.

Here’s the CSS:

Here are the styles you will need to add to your style sheet. We basically just fix the background image to the top left of the browser and give it 100% width and height to fill the screen. Your content is positioned relatively above the image.

<style type="text/css">

html, body {height: 100%; margin: 0; padding: 0;}
#background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}

</style>

Here’s the HTML:

Now we just need to add our background image to our HTML under the body tag like so. It should be above the content of your site.

<body>
<img id="background" src="background-image.jpg"  />
<div id="content">Your website content goes here ...</div>
</body>

And the IE6 fix:

Of course IE6 is going to give us problems so we need to put in a style fix for IE6 into the header of our site like so. And that’s it, it’s all done. Now we have a background image that stretches to fill the browser and best of all, it even works in IE6!

<!--[if IE 6]>
 <style type="text/css">
 html { overflow-y: hidden; }
 body { overflow-y: auto; }
 #background { position:absolute; z-index:-1; }
 #content { position:static; }
 </style>
 <![endif]-->

Adding Gravatar support with PHP

Let’s assume that you have a blog and you want to add Gravatars to the comments. Basically you will need 3 things to get started. The email of the person making the comment (This can be collected from your comment form), a default Gravatar image on your server in case some people don’t have a Gravatar and finally you need to define the size of the Gravatar image you want. Here is the code you need below.

//The email of the person making the comment
$email = "cornelius@blah.com";

//A default Gravatar image to use for people without Gravatars
$default = "http://www.somewhere.com/default.jpg";

//Define the size of the Gravatar image
$size = 80;

Now you’re ready to display your Gravatar. To generate your Gravatar URL simply use the code below.

$grav_url = "http://www.gravatar.com/avatar.php?
gravatar_id=".md5( strtolower($email) ).
"&default=".urlencode($default).
"&size=".$size;

Basic comments template

Now let’s style it up a bit to look like the comment image above. Here is a basic template to style your comments with the Gravatar included on the left.

<style>
/* Styles for comments */

.comment{border:#CCC solid 1px; padding:20px;}
.comment img{float:left: padding:0px 20px 20px 0px;}
.comment .h4{font-size:18px;}
.comment p{padding:5px 0px;}
.comment .date{font-size:10px; font-style:italic;}

</style>

<div class="comment">
    <img src="<?php echo $grav_url ?>" />
    <h4>Joe Blow</h4>
    <p class="date">Date of comment goes here</p>
    <p>The comment goes here</p>
</div>

More ways to add Gravatar support to your blog comments

• WordPress Gravatar Plugin
• Drupal Module
• Joomla Gravatar Support
• JavaScript Gravatar Implementation
• .Net Gravatar Implementation
• Java Gravatar Implementation