Myth: Adding JavaScript to Joomla Requires Insecure Editor Settings or 3rd-Party Extensions

The easiest way to use Javascript in Joomla is to disable the WYSIWYG editor. It's not ideal in all situations, but it's not the only choice.

Three ways to add Javascript to Joomla without installing an extension.Fact: There are many other ways to add JavaScript to Joomla, but they often require intermediate skill.

I originally wrote this post as a response to a discussion on LinkedIn in which a user had run into that familiar issue - getting a third-party widget which requires JavaScript, such as an AdSense block, into their Joomla site. Naturally, the code was stripped immediately upon saving. The advice before I arrived included a quick throwaway bit about modifying the template, and advice to download a custom extension. I decided to spend a little time giving out the free advice quoted after the cut.

You can often get Javascript to work in a Custom HTML module by turning off the WYSIWYG editor (TinyMCE) before you enter it. Make sure never to edit that module with any editor turned on, or it will strip the code.

You can do this either in User Manager or Global Settings.

It's also possible to make TinyMCE allow scripts, but it's generally not recommended.

If you add an extension to your site to solve this problem, make absolutely sure it's one with a longstanding, good reputation - since the problem can be solved with intermediate tech skill, that makes solutions like this a ripe place for malicious extensions.

Ultimately the best place for this code is to put it directly in your template. Find the module position you were going to place the Custom HTML module into, and add the code directly before or after it. In modern versions of Joomla, module positions live in your "main template file" under Template Manager >> Templates >> (template name) Details and Files, and the code looks like this:

   <jdoc:include type="modules" name="position-7" style="well" />

Also important... modules are often conditional. There is usually an "if" statement surrounding the module position. If you are going to manually put code into a module position such as I'm advising, you will need to modify that if statement.

For example, if I was putting code manually into position-7 (the module position cited in the example above), I'd modify this line, which appears a few lines above the actual module position:

   <?php if ($this->countModules('position-7')) : ?>

...by changing it to this:

   <?php if (TRUE || $this->countModules('position-7')) : ?>

That tells Joomla to always render that bit of the template, instead of rendering it only if there's a module in position-7.

The green highlighted text contains the entire if block mentioned in the above advice in its unmodified form. Your template code may differ wildly, but the principles I describe, remain.

The green highlighted text contains the entire if block mentioned in the above advice in its unmodified form. Your template code may differ wildly, but the principles I describe, remain.

One thing to bear in mind about this advice - using this technique, the JavaScript block will now appear on every page which uses that template. This might not be desirable, to say the least. In those cases, it's possible to make Joomla (and TinyMCE, the WYSIWYG editor) accept the code you need it to accept - but this comes with security concerns and is a topic too big for this blog post. For those situations, a third-party extension may be the best choice, after all - but, even for those cases, it's not the only option.

For example, you could have a module position which is used for nothing but AdWords; put a module in that position and configure which pages you want AdWords to appear on; but not actually put the AdWords code, into the module. Then, use the "if" block structure to determine whether there's anything in that module position, on this page - and then present the JavaScript without actually displaying the "trigger" module at all. The "trigger module" could be anything, in that case - its only purpose is to trigger that "if" block which determines whether the JavaScript in that part of your template, gets displayed.