Page 1 of 1

How To Add HTML or Plain Text Above And Below Any Module

Posted: Mon Jun 19, 2017 3:59 am
by websitedons
One would be surprised at the added SEO value derived from even more relative text! That is the forever quest of every website owner, and as such, many constantly ask how they can add text below and / or after any module type, specifically that lil' one called mod_footer.

While module templates can be overridden, that only takes care of the display, but you need to have the form fields available in the edit view in order to get the text to the database, and the .xml file which creates the fields, doesn't ride the override train. So you need a plugin for that.

A System plugin serves the purpose.

1. Create the folder which will contain all the files and give it a relative name

2. Create the primary function file within the folder and keep the name similar to the folder for simplicity

Code: Select all

<?php defined('_JEXEC') or die();
* @package      plg_system_add_module_text
* @copyright   Copyright (C) All rights reserved.
* @license      GNU General Public License version 2 or later; see

class plgSystemAdd_Module_Text extends JPlugin {

	public function onContentPrepareForm($form, $data) {
		// module edit form. it checks for the popular advanced modules extension
		if( $form->getName() == 'com_modules.module' || $form->getName() == 'com_advancedmodules.module' ) {
			$form->loadFile('modulefields', false);

3. Create the installer XML file within the folder and give it the same name as the function file

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.7.0" type="plugin" group="system" method="upgrade">
   <name>System - Add Module Text</name>
   <copyright>All Rights Reserved.</copyright>
   <license>license GNU/GPLv3</license>
   <description>Add HTML text area to any module</description>
      <filename plugin="add_module_text">add_module_text.php</filename>

4. Create within the folder, the form control xml file which will be shown in the module edit view.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<fields name="params">
	<fieldset name="basic">
		<field type="spacer" hr="true" />
		<field type="spacer" label="<b> Add Text Before And After The Module </b>" />
		<field name="pretext" type="textarea" class="span8" rows="2" filter="safehtml" label="Pre Text" />
		<field name="posttext" type="textarea" class="span8" rows="2" filter="safehtml" label="Post Text" />
If you would like to use the WYSIWYG editor instead of plain text fields, swap the above textarea field lines with

Code: Select all

<field name="posttext" type="editor" width="500" height="400" filter="safehtml" label="Post Text" />
See the list of attributes which can be used:

Be sure to add an empty index.html file to the folder or remove the line <filename>index.html</filename> from the installer .xml file.

5. Compress the folder as a .zip, install and enable. Go to any module edit view. The fields will be at the bottom of the page.
Get the data output on the front end
You can now make overrides of all the modules you wish to add custom text

1. Go to Extensions > Template Manager
2. Under the column titled Templates, click the name of your default front end template (the one with the highlighted star)
3. Click the tab labeled Create Overrides
4. Under the column titled Modules, click any module name to immediately create the override. The page will refresh and confirm the copy.
5. Click the tab titled Editor
6. Click html, mod_footer (or whichever you created), default.php. The code editor will display.
7. Add the following based on your desire, above and below the logical HTML element you see. This example is based on mod_footer.

Code: Select all

<?php if( !is_null($params->get('pretext')) ) { ?>
<div class="pretext"><?php echo $params->get('pretext'); ?></div>
<?php } ?>

<?php // these 2 lines are the default core ?>
<div class="footer1<?php echo $moduleclass_sfx; ?>"><?php echo $lineone; ?></div>
<div class="footer2<?php echo $moduleclass_sfx; ?>"><?php echo JText::_('MOD_FOOTER_LINE2'); ?></div>

<?php if( !is_null($params->get('posttext')) ) { ?>
<div class="posttext"><?php echo $params->get('posttext'); ?></div>
<?php } ?>
8. Click Save.

Repeat the override action for each module you want to add the custom fields. Note The fields will appear for EVERY module even if they do not have the frontend override. Nothing will be harmed, even if text is added.
das it!

Some advanced ish
You can take the wilder side of content output with added module text fields by rendering content plugins within those newly added fields. One may wish to use their video plugin {yuutube url="the-url"} or a {gallery}agallery{/gallery}, or even {loadmodule login} etc to post above or below any module. Well it can be done with some additional code lines PER module.

Modify the previous coding

Code: Select all

<?php // allow content plugin rendering with user permission
$user = JFactory::getUser();

$pretext = $params->get('pretext');
$posttext = $params->get('posttext');

if( $user->authorise('core.create', 'com_modules') && $user->authorise('core.edit', 'com_modules') ) {
$pretext = JHtml::_('content.prepare', $params->get('pretext'));
$posttext = JHtml::_('content.prepare', $params->get('postext'));

<?php if( !is_null($params->get('pretext')) ) { ?>
<div class="pretext"><?php echo $pretext; ?></div>
<?php } ?>

<?php // these 2 lines are the default core ?>
<div class="footer1<?php echo $moduleclass_sfx; ?>"><?php echo $lineone; ?></div>
<div class="footer2<?php echo $moduleclass_sfx; ?>"><?php echo JText::_('MOD_FOOTER_LINE2'); ?></div>

<?php if( !is_null($params->get('posttext')) ) { ?>
<div class="posttext"><?php echo $posttext; ?></div>
<?php } ?>