• Cat-like Typing

Joomla! Dev – Template Overrides for Modules/Components

Joomla! isn’t perfect.  In fact, it’s pretty far from perfect.  One of my big annoyances is that Joomla! uses tables… a lot.  I pride my designs on being CSS only.  Tables should be used for tabular data only and definitely not for layout.  Unfortunately Joomla!’s base components don’t seem to share the sentiments.   However, while Joomla! doesn’t always display what we would like it to, it does give us the means to override it and decide for ourselves how it displays.

Overriding Components with Specific Hooks

Okay, let’s say we’re building a table to display data for the front or backend of a component.  First we need to have the foresight to realize that having too much data on the page is bad and that we want some pagination.  Since we’re skilled Joomla! developers (or we’d like to think we are), we know that Joomla! packs pagination capabilities we can draw upon in the JPagination class.  Check it out in /libraries/html/pagination.php if you haven’t seen it before.

Fast forward a bit and we’ve built our table to use JPagination and it’s great… except we don’t like the output and we’d like to rearrange to look a little nicer.  Well that’s not a problem at all.  If you took the opportunity to poke through JPagination, you probably noticed this little block of code:

$chromePath = JPATH_THEMES.DS.$mainframe->getTemplate().DS.'html'.DS.'pagination.php';
if (file_exists( $chromePath ))
{
	require_once( $chromePath );
	if (function_exists( 'pagination_list_footer' )) {
		return pagination_list_footer( $list );
	}
}
return $this->_list_footer($list);

What this block of code is doing is essentially saying that if /mytemplate/html/pagination.php exists and it has a function called “pagination_list_footer” then call that to display the output.  Otherwise call the default class’ “_list_footer” function.  All we need to do in this case to get a custom display is create that file and function.

Overriding Component Templates

Overriding components with hooks is rough because many times we don’t know the hook exists.  Until I sat down and looked through JPagination, I had no idea there was a hook there for an output override.  Unlike those, overriding templates is much easier for us thanks to the great way template files are implemented.

Let’s look at the directory structure for article of com_content as that is a piece which we will likely want to override fairly often.

- /com_content
  - /helpers
  - /models
  - /views
    - /archive
	- /article
	  - /tmpl
	    - default.php
		- default.xml
		- form.php
		- form.xml
		- pagebreak.php
		- pagebreak.xml
		- index.html
	- /category
	- /frontpage
	- /section

The important things to notice here are the contents of the tmpl directory as those are the pieces we can override.  default.php is the main file we’re interested in as it controls the display of all articles.  In order to override it, we need to place an override file in our template.

- /templates
  - /ourTemplate
    - /html
	  - /com_content
	    - /article
		  - default.php

Once this file and directory structure are in place, Joomla! will call our default.php file when it renders an article.

Overriding Module Templates

This is really no different from components but we should go over it because the module directory structure looks a little bit different (but not too much so).  For this example, let’s say we’re going to override mod_mainmenu.  First, we find our template file.

- /modules
  - /mod_mainmen
    - /tmpl
	  - default.php
	  - index.html

Next we copy default.php over to our template like so…

- /templates
  - /ourTemplate
    - /html
	  - /mod_mainmenu
	    - default.php
		- index.php

And that’s it.  We can modify the template default.php and see the changes on the website as Joomla! will prefer that one to its own.