Most Easy Steps to Convert a Widget into a Joomla Module

This development tutorial is very useful to convert/create a Joomla module. This is a very worthy tutorial that will make you learn how to transform a widget in a Joomla module with an existing widget.

However, this tutorial post will teach you complete procedure of generating a basic Joomla. Thus, it seems to be very easy and affable to comprehend even for the freshers who never attempted to create a Joomla module earlier. In this post we have taken a widget from mixcloud for reference.



Step 1: Setting up Our Files

Basic Files

There are two basic files which are mandatory for each and every Joomla module to be created. The first one is configuration XML file with buoy up the complete module details and parameters as well as another is PHP file that controls the complete module. In order to make this post more comprehensive for you, we are supposed to build a folder termed as as mod_mixcloud_widget and within this folder you are supposed to create mod_mixcloud_widget.php and mod_mixcloud_widget.xml by employing your code editor. However, prior to move ahead with next step create a single HTML file called index.html that will be required for hiding the contents incorporated in module folder while showing up by browser.

Template Files

Now, after including the core files, you are required to incorporate the template files. We can accomplish this through building a folder named tmpl. Within this folder we will create a index.html and default.php. The default.php file is the template module which used to grab the generated information as well as show them on the page into clean HTML format.

Language Files

Eventually, when we will create a new folder named language in our root module folder, it will comprises two files as en-GB.mod_mixcloud_widget.sys.ini and en-GB.mod_mixcloud_widget.ini that are obvious to render our module in context of accessing globally with an option of distinct multiple languages.

Final File Structure

Finally, at the end of accomplishing these steps, we are supposed to have a file structure that are listed below:

  • ·language/en-GB.mod_mixcloud_widget.ini
  • ·language/en-GB.mod_mixcloud_widget.sys.ini
  • ·tmpl/default.php
  • ·tmpl/index.html
  • ·index.html
  • ·mod_mixcloud_widget.php
  • ·mod_mixcloud_widget.xml

Step 2: Setting Up Our XML File

All installed extensions of Joomla incorporate an XML file that is considered as a install or manifest file. This file is accompanied with metadata details including version, author, description etc. Furthermore, it is also employed as a configuration file for module parameters. However, in the purpose of making this tutorial more comprehensive for you, we will create a manifest file for Joomla 2.5 module. Hence, you are required to include the following fragment of code to your XML file.

Lets take a look over some attributes of the primary tag extension:

  • type: It says Joomla that in this module what kind of extension has been installed.
  • version: This intimate the installer/users that with what version of Joomla this module will be compatible.
  • method: it incorporate two options ‘upgrade’ and ‘new’. In context of update to our module in future we will employ ‘upgrade’ that will simply designate the new thing available there and upgrade this.
  • client: It states about a module whether that is a back-end or front-end module.

metadata tags are another set of tags that retain the information concerned with module that will be implemented during administration and installation of the module.

Module Files

As we discussed earlier, the manifest file comprises the all relevant information of concerned files which has been employed in the module. At the time of installation, Joomla used to check the manifest file in order to ensure all other files that must be included to the system. In the case, when even a single file is missing, then Joomla will explain an error saying the concerned files which are missing. Any other files that will be comprised in the module but don’t included in the XML file will not included to the system. Incorporate the following fragment of code to your manifest file.

Language Files

This component incorporate the files for language which are supposed to be installed to the module. In this tutorial only one language is being employed. In the case, where multiple languages are to be used you can simply modify the files prefix and tag attributes to your desired exact language on the framework of Joomla.

Adding Parameters

Some extensions are supposed to not work right out of the box, but required some specific setting to be added; these settings are known as parameters which are described in the manifest file.

config is considered as the first element that buoy up other elements and will be showing up in HTML format. An another element called field is referred as the parameters meat where you can assign the kind of form data you might want to display. These elements are made up of some core attributes at its basic level

  • type: says about kind of form field such as checkboxes, calendar, radio, textarea and tex.
  • name: it is referred as the form field name to be displayed.
  • default: it is the field’s default value.
  • label: It is the text which appears at the beginning of a form field.
  • description: it is the description appears in a tooltip while hovering on a form field.

Distinct attributes are present there as well as vary from distinct type of form field such as filter, size, directory, exclude and many more.

Finished XML File

However, if you have successfully achieved so far, you are about to get an accomplished XML file as following.

Step 3: Creating


First of all you are supposed to include your copyright notice to your module. However, you can incorporate GPL license information in the case when you wish to submit your module to Joomla Extension Directory (JED).

Prior to approving a module in a directory, it falls under one of the check. Directly below this, I define the defined(‘_JEXEC’) or die statement; which are being employed in various PHP files to make it out of reach of hackers. Thus, considered as an another norms for JED approval.

Next, we are required to specify our parameters as variable. Thus, some developers used to assign their parameters as variables in context of having more cleaner template files. Towards calling a parameters we simply employ $params->get() fucntion and congregate the param name assigned into the manifest file. Eventually, we will employ the function of module Helper, getLayoutPath, that will results in modifying our module template.

Taking up the module name we are attempting to call is the first argument of the function as well as the second argument designate the template we tried to modify for that concerning module. However, here we have the layout parameter and with second argument we define the default layout to be default. The name of this layout is the exact name we incorporated in our tmp1 folder.

Finished File

Step 4: Creating default.php

Here, we have built a manifest file accompanied with parameters that retrieve those identical parameters and render them into variables. Following this procedural, we are going to implement those variables into our template file. However, the template file will transform all HTML for our module. Now, you are required to edit the default.php from your tmpl folder and incorporate this code fragment  provided below:

Copyright Notice and Restricted Access Script

Adding our HTML

In reference of this tutorial, we will required the embedded code from Mixcloud. The main purpose of our module is to transform the code reusable in order to modify or create a Mixcloud widget on one’s website without attempting to designate embed code for each and every time. However, proceeding ahead you are supposed to copy and paste this embed code into your default.php file.

Making the Script Configurable

In the case when you wish to embed a widget permanently, you can zip up the module. So, we are going to transform a couple of attributes with our module params. Thus we would modify the height, width, color and feed. Copy the below provided snippet and paste this into your embed script.

Step 5: Creating Language Files

As we discussed earlier, we have created a folder named ‘language’ accompanied with two files then we included some translatable text. Here, in coming section, we will learn to translate those text into English. However, in order to perform this action, you are required to include the following code fragment to the two ini files, en-GB.mod_mixcloud_widget.ini and en-GB.mod_mixcloud_widget.sys.ini


Here, you can observe that the text being used for the parameters has been translated into English. So, you can include other files too and make translations in other languages.

Step 6: Packaging the Module

Once, you perform all the steps accurately, now you have render your module installable, but prior to installation and distribution we will attempt to perform a checklist of the things.

Add index.html to Folders

Inserting an index.html file to each and every folder is highly recommended. However, this file as described earlier checks user to view modules’ contents directly over a browser. Insert following code fragment to files:

Comparing our File Structure to the Manifest File

Here, you are suggest to look after the files and folders which are specified in your manifest file, as well as ensure their existence in your module folder. In the case, if any file doesn’t exist their can bring an error as well as check the installer from installing files.


After making the checklist, you can package the module in zip file as well install this. In account of exploring modules manager and designating them you can transform the parameters with your desired height, width, color and song feed.

Now, you are supposed to activate the module and analyze to see whether it is operating in the same way that it should be.

Step 7: Submitting to JED

Locating the category

After registering with JED, one of the most noticeable thing is that you can’t include an extensions to more than one sections. However, designating the appropriate section is quite obvious. Designate a suitable section through exploring the site then locate Submit Extension at the top left corner.

Filling Out the Details

One you would select to submit an extension, a form will appear where you would require to fill-up the details regarding your submission.

Success Image

However, once you have submitted all field and files with with appropriate value, you will see a message identical to above screenshot.

David Meyer

As the most experienced developer of CSSChopper - PSD to HTML Conversion Company, David Meyer firmly believes in building the new ways that lead the people towards success. He focuses on an ideal approach and tries to deliver the perfect services close to the defined needs.