Tutorial for How to Install jQuery Plugins

by Chris Hoffman
Include jQuery plugins in your HTML code.

Include jQuery plugins in your HTML code.

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.

1

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

2

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

3

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

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.

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.

<script src="jquery.plugin.js"></script>

6

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

7

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

Tips

  • check Use a jQuery plugin on additional Web pages by adding the plugin's script tag to each Web page's HTML file.
  • check Consult each plugin’s documentation for information on usage.

Warning

  • close Only install plugins you trust. Malicious plug-ins could steal personal data or have other negative effects on your website.

About the Author

Chris Hoffman is a technology writer and all-around tech geek who writes for PC World, MakeUseOf, and How-To Geek. He's been using Windows since Windows 3.1 was released in 1992.

Photo Credits

  • photo_camera Ablestock.com/AbleStock.com/Getty Images