How to add new module position to joomla 3.x template?

For experienced Joomla developers it is an easy task to add a new module position to any template, but what about newbie joomla users? This article was create for those who just starting with joomla and trying to customize a template for their needs. In this tutorial I will show you how to add a module position and how to style it.

Compatible with Joomla: 2.5 and 3.x

You have downloaded a nice looking joomla template and you have installed to your joomla system. Still missing something, you want to add a slideshow, but the available module positions are not in the right place.

Locate and edit the template files

First of all you have to locate the index.php file of the template you want to modify. You can find it in the following folder: joomla_root/templates/yourtemplate/index.php if you are browsing the files via FPT, or you can edit this file directly from Joomla backend at:

Extensions > Template Manager > Templates > Yourtemplate Details and Files

Click on the index.php file and you will be able to modify this file in the in-built Joomla php editor, just like in the image:

edit index.php file in joomla template

Let’s say you want to add the slideshow under the navigation menu; locate the code that renders the menu, and add the code of the new module positions under it.

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

<div id="navigation" class="span_12 col clr">

<jdoc:include type="modules" name="menu" style="menu" />

</div>

<?php endif; ?>

Probably the code of the menu will look a bit different in the template you are using, but I hope you understand the concept. Now add the code of your new module position:

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

<div id=" slideshow ">

<jdoc:include type="modules" name=" slideshow " style="none />

</div>

<?php endif; ?>

Save the file, go to the Joomla frontend and preview the module positions just like in this tutorial. If the module positions appears, you did everything right.

Now locate the templateDetails.xml file and the module position here as well. This is important because otherwise the slideshow position will not be visible in the backend when trying to publish the module on this position. This file is located in joomla_root/templates/yourtemplate/templateDetails.xml folder, if you are browsing with FTP, but it can be edited just like the index.php file from the Joomla backend.

Locate the code <positions> …</positions> and declare your new module position:

<position>slideshow</position>

Just like in the following image:

xml module positions

Now when you add a new module in the joomla admin, the “slideshow” position will be available in the module editor. You did a great job!

If you want to style the module, there is one more thing you want to do. Find the styles.css file, which is usually located in the following folder: joomla_root/templates/yourtemplate/css/styles.css

This file can also be edited in the Joomla administration panel just like the above mentioned files. Add the css code to the styles.css file and save it.

#slideshow {margin: 0 auto; padding: 0; max-width:960px}

#slideshow img {width: 100%; display: block;}

If your template is responsive, make sure that the new style you have created is also responsive, so the new module will automatically resize if the site is accessed by a smaller screen device.

Hope this tutorial is of good use. If you have any questions, I’m more than happy to answer them in the comments.

Video tutorial on how to add a new module position:

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponShare on LinkedIn

This article has 2 comments

  1. Rob Reply

    I’m sure this article will help many Joomla newbies. Would be great to see more of these type of tutorials.

Leave a Comment

Your email address will not be published. Required fields are marked *