Adding External JavaScript Files (.js) Into Moodle

You may wonder how to add custom JavaScript files into Moodle. I had the same question. So, I am writing this article to share how I made it through and ease your process with an example.

Steps

1. Go inside your “/theme/YourThemeName” folder. If you don’t have “javascript” folder inside “/theme/YourThemeName”, create a new folder called “javascript”.
2. Inside the new javascript folder that you have created, upload the .js files.
3. Next, go inside your “/theme/YourThemeName/config.php”. At the very bottom of the file, add a new line of code to include our javascript files.

#To load the js files in your header:
$THEME->javascripts = array(‘yourfirstjsfile’,’yoursecondjsfile’); 
#To load the js files in your footer:
$THEME->javascripts_footer = array(‘yourfirstjsfile’,’yoursecondjsfile’);

4. In order to see the changes, the caches of the site must be purged. Clear the browser cache and refresh to see the changes.

Note: Add the JS files in the config without specifying the extension.As “yourfirstjsfile” not like “yourfirstjsfile.js”