How to Create a Custom jQuery Plugin

The convenience of the jQuery plugin is that you can use the same code several times for different objects. In this case, copy-paste code is not needed. In addition, you can change the behavior of the plugin with different parameters. To write your jQuery plugin, you need to expand the $.fn object

In general, it looks like this:

$.fn.MyPlugin = function() {
    //plugin code
}

We write a plugin that will add a paragraph with the class “paragraph” after the selected object by clicking on it. By default we will set the red color of the text of our paragraph.

(($) => {
    $.fn.myPlugin = function(options) {
        const settings = $.extend({ //set default parameters
            color: 'red'
        }, options);

        //write the logic of our plugin
        $(this).on('click', function() {

            const par = '<p class="paragraph">An added paragraph</p>';
            $(this).after(par);
            $(this).next('.paragraph').css('color', settings.color);

        });

        return this; //for call chains
    }
})(jQuery);

The call for two different elements looks like this:

$(() => {
 
    $('.firstsel').myPlugin({
        color: 'green'
    });
     
    $('.secondsel').myPlugin();
     
});

You can see an example of how this works on Codepen:  https://codepen.io/igorrybalko/pen/WberZOY