How to add jQuery Scripts and Stylesheets to Joomla

Note: This article is outdated.
The Joomla extension mentioned in this article has improved: Eorisis Elements available in both Free/Pro editions.

---

In this tutorial I am going to show you how you can easily add your jQuery scripts (JS files) and/or stylesheets (CSS files) to your Joomla site, so that they get loaded either on the Front End and/or the Back End, without having to hack Joomla core or other extension code. The files can either be Internal (loaded from the local system, your own site/server), or External (loaded from an external source/site, i.e., a CDN).

To do this properly we need the eorisis jQuery plugin installed and enabled. We will make use of the Add Files tab of the plugin.

Choose one or more of the following, depending on what you need to do.

Add a custom jQuery script: Load it to your site from the Local/Internal system:

1. Create a file, for example: my-script.js (the file extension must be 'js').
2. Place your jQuery code inside this file.
3. Create a folder inside the Joomla's /media/ directory (Recommended), for example /media/my-folder/
4. Upload your my-script.js to that directory. The final path will look like this: /media/my-folder/my-script.js
5. Go to your Extensions -> Plugins -> System - eorisis: jQuery plugin in the Joomla Administrator and open the Add Files tab.
6. Copy and paste the path to your file /media/my-folder/my-script.js in the JavaScript > URLs field (you can omit the leading forward slash).
7. Set JavaScript to Enabled.
8. Use the Area option to load the script to the Front End (Site), Back End (Administrator), or to both of them.
9. Save the plugin, clear your Joomla and browser's cache and reload your site.

Add a jQuery script: Load it to your site from an External source:

1. Go to your Extensions -> Plugins -> System - eorisis: jQuery plugin in the Joomla Administrator and open the Add Files tab.
2. Copy and paste the URL that points to the JS file, in the JavaScript > URLs field (Scheme Relative URL - Read Notes below).
Example URL: //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js
3. Set JavaScript to Enabled.
4. Use the Area option to load the script to the Front End (Site), Back End (Administrator), or to both of them.
5. Save the plugin, clear your Joomla and browser's cache and reload your site.

Add a custom Stylesheet (CSS): Load it to your site from the Local/Internal system:

1. Create a file, for example: my-styles.css (the file extension must be 'css').
2. Place your CSS code inside this file.
3. Create a folder inside the Joomla's /media/ directory (Recommended), for example /media/my-folder/
4. Upload your my-styles.css to that directory. The final path will look like this: /media/my-folder/my-styles.css
5. Go to your Extensions -> Plugins -> System - eorisis: jQuery plugin in the Joomla Administrator and open the Add Files tab.
6. Copy and paste the path to your file /media/my-folder/my-styles.css in the StyleSheet > URLs field (you can omit the leading forward slash).
7. Set StyleSheet to Enabled.
8. Use the Area option to load the script to the Front End (Site), Back End (Administrator), or to both of them.
9. Save the plugin, clear your Joomla and browser's cache and reload your site.

Add a Stylesheet (CSS): Load it to your site from an External source:

1. Go to your Extensions -> Plugins -> System - eorisis: jQuery plugin in the Joomla Administrator and open the Add Files tab.
2. Copy and paste the URL that points to the CSS file, in the StyleSheet > URLs field (Scheme Relative URL - Read Notes below).
Example URL: //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.min.css
3. Set StyleSheet to Enabled.
4. Use the Area option to load the script to the Front End (Site), Back End (Administrator), or to both of them.
5. Save the plugin, clear your Joomla and browser's cache and reload your site.

Warnings:

- Do not upload files or create any custom folder inside the /media/eorisis-jquery/ directory, as they will be wiped out after an update of the eorisis jQuery plugin.
- Custom scripts should be used from sources or developers that you trust. Do not load anything you find here and there to your website.

Notes:

- You can load any number of JS or CSS files, Internal or External, one per line.
- For Local/Internal files, if you need to make changes to the code in any of the files you added in the Add Files tab does not mean you have to change your settings in the eorisis jQuery plugin, unless you completely change a filename, folder, or any part of the path. Organise a stable directory/file structure that you will not change often.
- If you load files from an external source, make sure that the source is a CDN. Never hotlink files from websites that you are not authorized to do so.
- Scheme Relative URLs omit the http: or https: part and begin directly with the the double forward slash //. Although this is the best practice when using External URLs from a CDN to avoid SSL conflicts, always make sure that the CDN does have SSL enabled by testing the URL with https directly from your browser. Trying a Scheme Relative URL from your browser will fail.
- Joomla's /media/ directory is the best area to create your custom folder. Of course you can create a folder anywhere else, but it cannot be outside the Joomla's root (this is the directory where your Joomla is installed).
- The jQuery library must be loaded to the same Area that you chose to load your custom media using the Add Files tab.
- Always inspect the source code of your pages to make sure everything is correctly and nicely added.

---

Recommended Joomla Extension: Eorisis Elements available in both Free/Pro editions.