I dug around the web today for tutorials on making personalized jQuery plug-ins.  A plug-in is much more easily deployed onto a site than customized code, which may require editing or customization between sites.  Using a plugin, we have a much simpler means of calling a script using common syntax:  $(‘something’).doThis();

In the past, I’ve developed scripts to work within the $(document).ready() jQuery function.  Events and methods that were nested within usually had a variable targeting a class or ID on the DOM that manipulated that element accordingly.

Document Ready Scripting Examples:

$(document).ready(function(){
   var button= '.myButton';
   $(button).click(function(){
      alert('You clicked a button.');
    });
 });

This simple example will result in any page element with class myButton result in a message box once clicked.  While this is a simple example, more complicated scripts might be developed as a plug-in instead for increased portability without affecting functionality.  This practice also makes your code re-useable and easy to integrate between projects and other plugins. In terms of syntax, it is also much simpler for front-end developers to use a line of code such as the one below.

Plug-in Scripting Example:

$(‘.myButton’).makeButtonAlert(‘You clicked a button.’);

Documentation on Plugin Development

Having never developed a plugin, I had to look over a few tutorials to get a grasp on the needed syntax.  Here is a list of some of the better tutorials and documentation I came across:

• jQuery – Plug-in Authoring  (More technical approach)
• CodeProject – Creating A Simple jQuery Plugin
• SitePoint – How to Develop a jQuery Plugin
• My First jQuery Plugin
• A Really Simple jQuery Plugin
• Signs of a Poorly Written Plugin

Plugin Breakdown

Here is the same script re-written as a plug-in to jQuery and can be either appended to the end of the jQuery Library or included as a separate JS file.

 //Opening and closing the script is only slightly different in syntax:
 (function($){

     //Create your jQuery method name here (makeButton).
     //Notice we take in a variable "input" which is passed by the makeButtonAlert() 
     //call so that different messages can easily be used in the message box.
     $.fn.makeButtonAlert = function(input) {
       //Using the each function, we iterate all instances of the selector on the DOM.
        return this.each(function(){
        //At this point of the script, 'this' refers to the elements on the DOM you are iterating. 

             //Plugins can make use of a method for storing information -- this is properly named .data().
             $(this).data('message',input);
            //Just like the .css() or .html() functions, you use a second parameter to set the value.             

             //Plugins also have their own method of attaching events, using the .bind() method. The first parameter in quotations is the JS event, the second is the function you tie that event to.
             $(this).bind("click", events.click);
             //You may 'chain' the bind command on one selector to attach multiple events. The methods triggered by these events are coded below in the events object.

        }); //Closing for .each() method
      }; //Closing for $.fn.makeButton
      var events = {
         //Set up the events object with a method that gets fired when the 'bound' selector gets clicked.
         click: function(){
            alert($(this).data('message'));
         }
      }; //Closing for events object

 })(jQuery); //Closing for plugin

The Easy Part…

Now, you’re free to use your customized plugin in other projects using:

$(‘.button’).makeButtonAlert(‘You clicked a button’).
$(‘input[type="button"]).makeButtonAlert(‘You clicked a button with a different selector.’);
$(‘#message-button’).makeButtonAlert(‘You clicked another button’);

If your business uses WordPress for blogging or as a content management system, there are some great plugins out there to make life easier. Here are the top 10 WordPress plugins that I love.

1. Headspace 2 – HeadSpace manages meta data and other SEO functions. It allows you to tag your posts, create custom titles and descriptions that help your page ranking.

2. Simple Facebook Connect – This plugin comes with many different options. You can give your visitors the ability to comment using Facebook Identity (with FB avatar support), login with Facebook credentials and register using Facebook. It also allows you to automatically publish new posts to a Facebook Profile or manually publish posts to a Facebook Profile or Application/Fan Page. And if that weren’t enough, check out the other available buttons and widgets available through this plugin!

• Share button and Shortcode
• Connect Button Widget and Shortcode
• User Status Widget and Shortcode
• Live Stream Widget and Shortcode
• Bookmark Widget and Shortcode
• Find us on Facebook button Widget and Shortcode
• Fan Box Widget
• Fan Count Chicklet and Widget

3. TweetMeme – The TweetMeme button plugin simply adds the TweetMeme button to your posts and feed. It keeps a running total of how many times your content is tweeted. (See example on this post!)

4. Akismet – This does a great job of keeping your WordPress site free of spam. When a new comment, trackback, or pingback comes to your site it is Akismet runs hundreds of tests on the comment to determine whether or not it is spam.

5. WP Click-Track – This plugin automatically posts and rewrites links in your content (pages, sidebar, posts, etc.) in order to include a tracking element. It also allows users to create stand alone trackable links that can be included in posts. It also provides extensive reports right within the WordPress dashboard.

6. Category Order – This seems like a simple plugin but there have been countless times where I’ve needed categories to be in a specific order that wasn’t alphabetical or by ID. This little plugin allows you to easily reorder your categories the way you want via drag and drop.

7. Google Analytics for WordPress – Even though you can use Google Analytics on a WordPress site without this plugin, it’s missing a whole lot of features that this plugin offers. This plugin includes:

• Google Analytics Custom Variables
• Google Analytics API integration
• E-Commerce integration
• Event tracking

8. cformsII – CformsII is the best form plugin I’ve used. Its creators are actually the authors of one of my favorite cooking blogs. This amazing plugin has an incredible amount of features and flexibility. You can create detailed custom forms, style them individually and place them in sidebars, posts or pages.

9. AddThis – AddThis is my favorite share plugin because  it automatically optimizes itself for each person who visits your site. AddThis custom fits each menu with the services they’ll normally use. This plugin also has an automatic interface for iPhone users. The plugin allows a customized share button to be placed in a sidebar or on each post. AddThis.com also provides detailed analytics so you can see how your content is shared across the Web.

10. YD Recent Posts Widget – This WordPress plugin installs a new sidebar widget displays your most recent blog posts along with images. It is very customizable allowing different settings on the home page and other blog pages.