Adding Custom Modules to your Joomla Site

Colin Guthrie -

Modules are Joomla!'s way to add extra little blocks of content to your site. Other CMS's may use the term Blocks or Widgets for this kind of content. A Joomla! template will define several Positions where you can place Modules - this may be in the header or down the left or right hand side or even in the footer. Some websites may even have special placements that are only used on one very specific page (it's not uncommon for the homepage of a website to have special, extra Positions for custom modules.

There are several different types of module. These will vary from website to website, but these can include content from your Tribalogic Directory, Menus, Polls, a list of Latest News items or custom content. Regardless of what type of module you want to create, most of the process is generally the same. Below we'll show you how to create a custom HTML module.

 Step 1. First you need to go to Extensions  Module Manager in the Joomla! Administrator menu.

Page 1.png

 Step 2. Click on [New]. You will be presented with a screen to select which type of module you want to create. We'll pick Custom HTML such that we can enter our own code.

Page_2.png

 Step 3. You will now be presented with a screen to configure your module. First you should give your module a meaningful name. This name can, if desired, be shown to the user as a heading above your module. This is purely optional, so if you would prefer to add your own header (or no header at all) in the custom content this is fine too, but you should still provide a name for your module such that you can find it again later.

Screen_shot_2012-10-03_at_12.02.32.png

 Step 4. Select the position for your module. These positions will vary from website to website and are defined by the template used. The names are usually self explanatory. Don't worry if you pick the wrong position, you can easily move your module later!

 Step 5. You can assign multiple modules to the same module position. Joomla! will simply display all modules one after the other. In order to control the order you can select this from the drop down. It's often easier to adjust the module order from the overview page which we'll cover below.

 Step 6. Joomla! modules can be configured to be displayed across the whole website, or restricted only to certain sub-sections of the site. This restriction is achieved by linking modules to Menu Items. You can either select to show the module on all menu items or just a subset. The subset is typically the most useful. Simply select which menu item(s) on which you want your module to appear. You can use shit+click to select a range of menu items and ctrl+click to select individual items.

 Step 7. Now that you've configured your module, it's time to put in some content! It's easiest to just use the WYSIWYG editor to enter your content, but in some cases you may need to enter custom code. You can either toggle the editor off completely, or the "Toggle Source Code" option in the editor toolbar. In order to ensure safety and prevent malicious code being included on your site, the editor will often perform some code cleanups and strip out some prohibited elements. This is completely configurable, but if you are pasting in HTML that includes style and script elements make sure the editor does not "tidy" them out the way after saving. If it does and you need the code to go in verbatim, contact us and we'll ensure your editor is configured accordingly.

 Step 8. You are done! Simply hit "Save" and you will be returned to the Module Manager screen. You can now go to your website and view the fruits of your labour. If you find that you entered the ordering of the modules incorrectly, you can use the filters on the top right of the Module Manager screen to select all Modules in that Position. From here you can easily see all modules and reorder them accordingly. Note however, that not all modules are shown at all times due to the menu restrictions. You will see this clearly if it says Varies in the Page column.

 

We hope this has allowed you to place a custom module on your site!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.