Add Custom Javascript to Your Joomla Site

One OSTraining member wanted to add Javascript to their site, but didn't feel comfortable enough to modify any existing files.

If you want to add custom Javascript to your Joomla site without modifying any existing files, we recommend the "Add Custom JS" plugin.

In this tutorial, we'll show you how to safely load your custom Javascript.

Step #1. Create your Javascript file

The most important thing is to know what Javascript code you want to add. If you are not familiar with the topic, we have a class that will be helpful[1].

  • Add your custom code into a file called mycustom.js.
  • Upload that file to your site. In this example, we'll upload the file to our template, but it could be anywhere:

Step #2. Install the "Add Custom JS" plugin

  • Go to the extension page for "Add Custom JS[2]" and click the download button.

custom javascript joomla

The zip file you downloaded needs to be uncompressed to discover the installers.

You will see two folders containing a module and a plugin. For this tutorial let's use the plugin marked below:

custom javascript joomla

  • Login to your Joomla administrator area.
  • Go to Extensions > Manage.
  • Click Upload a Package File and browse to find the file.
  • Click the Upload and install button.

Step #3. Setup the plugin

  • Go to Extensions > Plugins.
  • Search for "System - Add Custom Javascript".

custom javascript joomla

  • Open the plugin for editing.
  • In the Custom Javascript File Path option, enter the relative path to your javascript file. In this example we chose: templates/mytemplate/js/mycustom.js
  • Enable the plugin.
  • Choose "Order last" from Ordering param.
  • Click on the Save & Close button.

custom javascript joomla

Step #4. Check the result

Refresh your site to confirm your custom Javascript code is being loaded.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


  1. ^ we have a class that will be helpful (
  2. ^ Add Custom JS (

Read more

© 2024 Extly, CB - All rights reserved.