jQuery Plugin Template

Replace instances of "yourPluginName" with your actual plugin name. The stuff about "radius" is just an example of an option (parameter to pass plugin).

    $.yourPluginName = function(el, radius, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        // Add a reverse reference to the DOM object
        base.$el.data("yourPluginName", base);
        base.init = function(){
            if( typeof( radius ) === "undefined" || radius === null ) radius = "20px";
            base.radius = radius;
            base.options = $.extend({},$.yourPluginName.defaultOptions, options);
            // Put your initialization code here
        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // };
        // Run initializer
    $.yourPluginName.defaultOptions = {
        radius: "20px"
    $.fn.yourPluginName = function(radius, options){
        return this.each(function(){
            (new $.yourPluginName(this, radius, options));




$(function() {



Reference URL


  1. Simon
    Permalink to comment#

    That’s very useful, thanks!

  2. Artur Ejsmont
    Permalink to comment#

    Another very nice and useful snippet!

    keep up the good work!

  3. Andy @ sales++
    Permalink to comment#

    Nice template. Quite a different layout from others I’ve seen, but will definitely give this a go.

    Here’s an alternative jQuery plugin template.


  4. Alex Nertus
    Permalink to comment#

    Nice template.

  5. Martin
    Permalink to comment#

    This template is totally different from jquery docs. Are their any benefits to this type of template format?

  6. illmatix

    I find this template the best out of all the ones I’ve used. It’s been my starting point for the past couple years.

  7. unstoppableCarl
    Permalink to comment#

    I don’t completely follow the logic of its organization. I think it would be easier to understand if your example had some event driven functionality.

  8. Peter G
    Permalink to comment#

    How would you go about making functions public with this template?

    e.g. access a function called base.foo?


    • RonnieSan
      Permalink to comment#

      You can access something like base.foo by using the reverse reference in the DOM object.


  9. Zack Hovatter
    Permalink to comment#

    I’m also wondering the answer to Peter Gs question. Anyone?

  10. Beau Beauchamp
    Permalink to comment#

    This plugin design is not used by the official jQuery team because is pollutes the jQuery function namespace. The jQuery version is better since it allows you to use the “this” keyword in a more natural context.

    • Rob
      Permalink to comment#

      +1: This is not the official jQuery way due to namespace pollution. You can still access ‘this’ in other ways – you do not need ‘base’.

  11. silvawebdev
    Permalink to comment#

    Any chance these can work with ie? I get banding in the left corners – probably on the right too, but they our outside the div. I am stuck with the image buttons until this works, or there is some other work around… Any ideas – besides ignoring ie6,7,8,9?

  12. Jon Jaques
    Permalink to comment#

    Although this plugin does have an irregular structure, It does not pollute the $.fn namespace at all. As long as you declare you functions like so:

    base.myFunctionName = function(){};

    All functions are namespaced under $.yourPluginName. This is because everything is wrapped in the main plugin closure.

    Additionally, the use of base in place of this is smart, because it prevents the novice user from confusing it with this in the context of another function.

    For instance, if you refer to this inside of base.init(), you are referring to the init function itself, not your plugin. Using base makes it clear what belongs to the plugin, and what doesn’t.

  13. nicolas
    Permalink to comment#

    why doing this:
    $.fn.yourPluginName = function(radius, options){
    return this.each(function(){
    (new $.yourPluginName(this, radius, options));

  14. Curt

    This is beyond perfect.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.