Tutorial for How to Install jQuery Plugins (7 Steps)

By Chris Hoffman

The jQuery JavaScript library includes a plugin architecture. JQuery plugins can add user interface features to your Web page, extend jQuery’s syntax or add additional functions. You can add jQuery plugins to a Web page the same way you install jQuery itself, by uploading the plug-in’s JS file to your Web server and including the plugin with an HTML script tag. The plugin’s script tag must appear after jQuery’s script tag in the HTML code.

Step 1

Locate and download a jQuery plugin from the plugins page the jQuery website.

Step 2

Open the downloaded plugin’s archive file and extract the “.js” file inside it. Some plugins may contain multiple JS files.

Step 3

Open your Web page’s HTML file in a text editor.

Step 4

Locate the line that begins with “<script src="jquery.js” your Web page’s HTML file. Use your text editor’s search feature to locate this line.

Step 5

Add the following text onto a new line immediately after the “jquery.js” line, replacing “jquery.plugin.js” with the file name of the plugin’s JS file.

Step 6

Add additional “<script” lines for each plugin JS file you want to install on the Web page.

Save your Web page’s HTML file. Upload the HTML file and the plugin JS files to the same directory on your Web server.