How to Create a Custom jQuery Plugin

jQuery is, in my humble opinion, the best Javascript library.

Much of jQuery’s popularity is due to the fact that it considerably reduces development time. Their slogan is “write less, do more”, which is a great summary of jQuery’s benefits.

What make jQuery really great are the plugins. Plugins are reusable portions of code which help you write even less Javascript to achieve specific features on the client side. For example, you can use plugins to create slideshows, galleries, popups and more.

In this tutorial, you will learn how to create your own custom jQuery plugin in 4 easy steps.

Step #1. Create a basic jQuery plugin

In this tutorial we’re going to build a plugin that will print a greeting, plus a person’s name.

Create a file named jquery-hello.js with the following code:

(function ( $ ) {$.fn.hello = function( options ) {
// Default options
var settings = $.extend({
name: 'John Doe'
}, options );
// Apply options
return this.append('Hello ' + settings.name + '!');
};
}( jQuery ));

In the previous code:

$.fn.hello{/codecitation}

… defines the name for our plugin. In this case it’s hello.

name: 'John Doe'

… defines the default options. In this case it’s name and the default value is ‘John Doe’

this.append('Hello ' + settings.name + '!')

… will print the text “Hello person’s name !”

Step #2. Load the plugin

Load the last version of jQuery, the hello plugin and the call to the plugin in an HTML file. In this example, I’m going to add this to the head of my index.html file:

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery-hello.js"></script>
<script>
$( document ).ready(function() {
$( '#here' ).hello();
});
</script>

Inside the body, add the following div:

<div id="here"></div>

Step #3. Test the plugin

Open your site in a browser and the end result should display the greeting, plus the default name:

Edit the call to hello plugin to include a custom name:

<script>
$( document ).ready(function() {
$( '#here' ).hello({
name: 'Valentin Garcia'
});
});
</script>

Refresh your site:

Step #4. Add a new feature

You can easily integrate a new feature in the plugin, such as font color, by updating jquery-hello.js:

(function ( $ ) {$.fn.hello = function( options ) {
// Default options
var settings = $.extend({
name: 'John Doe',
color: 'orange'
}, options );
// Apply options
return this.append('Hello ' + settings.name + '!').css({ color: settings.color });
};
}( jQuery ));

The new portions of code are:

… defines the default color when a custom one is not defined later.

… will apply the color property as inline CSS.

Update the call to hello plugin to include a custom color:

<script>
$( document ).ready(function() {
$( '#here' ).hello({
name: 'Valentin Garcia',
color: 'green'
});
});
</script>

The new syntax now includes:

… defines ‘green’ as a custom color to override the default ‘orange’.

Refresh your site:

You can play around by adding new features or customizing the example ones. If you are not familiar with jQuery, don’t worry, we have a jQuery class for you.