how to create joomla 3 module

So you are planning to create a simple module for your Joomla website. Where should you start and how you should build it? In this tutorial I will show you the process of creating a simple module for Joomla 3.x that will work as a Custom HTML module with options to set custom background color, text color, border color and rounded corners. I know this can also be done via CSS using custom class suffix, but if you want multiple colored modules on your website and don’t want to change the CSS file every time you want to make a new custom styled module, here is the solution. I consider that you already have some basic knowledge of programming because in this tutorial I will include php, xml, html and css languages. To understand the process of building a custom module for Joomla you should be familiar with these languages.

Create the module files

joomla module core filesA Joomla 3.x module has two must needed files. You will need a .php and .xml file; without these two the module can’t work. Come up with a cool name for your module and save these files accordingly. Let’s say our module will be “jawsimple” and our files will be called “mod_jawsimple.php” and “mod_jawsimple.xml”; the “mod_” have to be added in front of both files. This way Joomla recognize it as a module. If you will create a component the core files of it will start with “com_” while for plugins it will be “plg_”.

The next step after you create these files is to add the following code to the .xml file. This code is necessary for the module to function.

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.4" client="site" method="upgrade">
<name>mod_jawsimple</name>
<author>JoomlArtWork</author>
<creationDate>August, 2015</creationDate>
<copyright>JoomlArtWork.com</copyright>
<license>GNU/GPL2</license>
<authorEmail>mail@example.com</authorEmail>
<authorUrl>www.joomlartwork.com</authorUrl>
<version>1.0</version>
<description>My First Joomla Module</description>

<files>
<filename module="mod_jawsimple">mod_jawsimple.php</filename>
</files>

<config>

</config>
</extension>

You will have to change some par of this code as your module name will be different; probably to author and copyright information you will also want to include your name as well want to change the email and website. This is only necessary if you want to offer your module for download for other Joomla users. Please also note, that this code does not include the language files, while we want to keep our module as simple as possible.

Add module parameters

Now, let’s add some custom parameters to our module. Here you can see the whole list of available parameters for a Joomla module. In our module we will include few color fields, a text field and an editor. You will have to add the following code between theĀ <config> </config> lines:

<fields name="params">
<fieldset name="basic">

<field name="backgroundcolor" type="color" default="#eee" label="Background Color:" />
<field name="textcolor" type="color" default="#333" label="Text Color:" />
<field name="linkcolor" type="color" default="#d00" label="Link Color:" />
<field name="bordercolor" type="color" default="#ccc" label="Border Color:" />
<field name="borderradius" type="text" default="0px" label="Border Radius:" />

<field name="jawText" label ="Add your text:" type="editor" width="6" filter="safehtml" />

</fieldset>
</fields>

This is how the parameters will show in the module editor, in the Joomla back-end:

preview parameters simple joomla module

Output the module parameters

So far you have your parameters added to the module, but if you install and activate it, it will not display anything. To display the module parameters on the front-end of the website, we will need to edit the “mod_jawsimple.php” file, which was created earlier.

I will not go into every details for the following piece of code, but here is a quick recap on what I did in the PHP file: restricted the file to be directly accessed, set variables for each color and assigned them to module parameters with the $params->get () function, have added CSS style that are using the values of the module parameters and finally have created the output for the content. Here is how I did it:

<?php
// no direct access
defined('_JEXEC') or die;

$bgC = $params->get('backgroundcolor','#eee');
$textC = $params->get('textcolor','#333');
$linkC = $params->get('linkcolor','#d00');
$borderC = $params->get('bordercolor','#ccc');
$borderR = $params->get('borderradius','0px');

?>

<style>
.jawsimple<?php echo $module->id ?> {
padding:10px;
background:<?php echo $bgC ?>;
color:<?php echo $textC ?>;
border: 1px solid <?php echo $borderC ?>;
border-radius:<?php echo $borderR ?>;}
.jawsimple<?php echo $module->id ?> a { color:<?php echo $linkC ?>}
</style>

<div class="jawsimple<?php echo $module->id ?>" >
<?php echo $params->get('jawText'); ?>
</div>

I have used the $module->id function to get the module’s id. This is not required, however if we are planning to use the module multiple times on our website and have custom style for each module, this is a must. The module ID is added to the CSS style, creating custom styles for each new module you publish.

Wrapping up – download the module

Now you can archive the files into a .zip and install it to your Joomla website. Publish it to the desired module positions and enjoy the view:

joomla-different-module-style-colors

Here is the download link for the finished module:

If you have any questions regarding this module, please do not hesitate to use the comment form bellow and tell us your concerns. If you want to hire us for a custom project, please use the contact form.

Hope, that this tutorial has helped you to understand how Joomla 3.x modules are working and how to create one from scratch.

Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Reddit

Leave A Reply