How to add a Joomla Template Module Position

If you work with Joomla sites long enough you have the need to add a module position or two to get the functionality required.

Steven Johnson
by | Posted: September 8, 2009 | Updated: March 31, 2014
Blog Post Image

Adding a new module position can seem complicated but it is actually pretty simple.  Only two template files are modified in the process.

The more html and css you know the better the process will be. 

Understanding the Joomla Module code.

The module code:
<jdoc:include type="modules" name="YOURNEWMODULE" style="none" />

jdoc:include type= is the variable that calls elements of Joomla.
Learn more about jdoc statements:

name= is the name of your new module positions
Sekect a nane that seems appropriate or relates to the module positon

style=  refers to module chrome:
typically will be "none" or "xhtml"
Learn more about Joomla Chrome


Steps to add a Joomla Template Module Position

1. Edit the template index.php file to add the new module code.
<jdoc:include type="modules" name="YOURNEWMODULE" style="none" />
It will help if you know some html and css.

2.Edit the templateDetails.xml file.
Look for the <positions> section of the file.  ensure that the name of the module matches the module postion you added to the index.php file in step 1


3.Assign a module to your newly created module position.
Log into the Joomla backend for this step.
If you do not see your module position you may need to logout and into the Joomla backend.


Helpful Module and Template Tips

  • Want to see all module positions? add ?tp=1 or &tp=1 to the end of your front end URL
  • I typically wrap the module inside of a <div> so that I can apply the apropriate css
  • Things not 100% clear check out your favorite templates and see how they added the code.  This is how I learned.
  • Want to add module position in the middle or your content area  Check our post on Modules Anywhere

Follow Online Backup Search at Twitter Online Backup Search Feed Online Backup Search on FacebookOnline Backup Search on YoutubeIntown Web Design on Google+ Page

Our Latest Information

Sign up to receive our latest and best information.

Tips, Tricks, Happenings and the Best Intown Web Design News.

Our newsletter will make your wildest dreams come true.