Adding Module Positions To Your Joomla Template


If you're into analyzing the traffic of your Joomla website (as you should be IMHO), you will probably need to add some tracking software to your site. The most obvious one is Google Analytics. Other choices can be Crazyegg, GoingUp or other solutions.

All of these, as well as other solutions, require that you add a Javascript snippet to your site. In this tutorial I'll show you how to add some module positions to your template. This will make it easier to add the required scripts to your website.

Inserting the module positions in your template

In order to make this as flexible as possible, We are going to add three module positions:


Now you're ready to insert the module positions.

You will need to enter the following code into your template index.php file. You'll find it here: /templates/yourtemplatename/index.php.

Make sure to create a backup of your index.php file before messing with it.

Enter this just before the </head> tag.

<jdoc:include type="modules" name="endhead" />

Enter this just after the <body> tag:

<jdoc:include type="modules" name="topbody" />

Enter this just before the </body> tag:

<jdoc:include type="modules" name="endbody" />

Save your template.

You will need to enter the following code into your template templateDetails.xml file. You'll find it here: /templates/yourtemplatename/templateDetails.xml.

Make sure to create a backup of your templateDetails.xml file before messing with it.

Find the <positions> section of the file and add the following somwhere between <positions> & </positions>


Save your template.

The next step is to add the actual modules that will hold your JavaScript. But before that, we need to do some adjustments to the text editor settings.

Allowing JavaScript in your editor

To be able to add the JavaScript to the Custom HTML module, you need to allow Javascript in your text editor.

If you use TinyMCE, you find this setting in Extensions -> Plugin Manager -> Editor - TinyMCE 2.0. Make sure you have the setting for 'Code Cleanup on Startup' set to 'Off' and the 'Code Cleanup on Save' to 'Never'.


If you're using JCE, go to Groups -> Default (or other group you're using) -> Editor Parameters. Make sure the 'Allow Javascript' setting is set to 'Yes'.


Adding the script to the Custom HTML module

Now, you need to add the actual Javascript snippet to a Custom HTML module and assign it to the appropriate module position.

I'll use Google Analytics as an example. Go to the Module Manager and click New. Choose the 'Custom HTML' module type. You will see the module parameters.

Enter a title for the module, for instance 'Google Analytics code', enable the module, choose not to show the module title.

For the Google Analytics code, we assign the module to the newly created 'endhead' position. This has the Google Analytics snippet appear just before the closing HEAD tag (</head>). As you have not entered the new module positions to the template XML file, they will not appear in the module position drop-down. Not to worry: You can simply enter the position name 'endhead' in the field directly.


Lastly, enter the HTML mode of your editor and paste the Google Analytics code into the window. You can now save the module.

Reload your website frontend and look for the snippet.

Adding more snippets

Using this method, you can add as many Javascript snippets as you like. You can control the order of the snippets by altering the order of the modules in the module manager.

I find this method easy to use and flexible. Hope you enjoy it and that it saves you some time and frustration