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.

Rubin Thomas's comment is:
On February 4, 2011 at 2:29 am

Hi,

This does not seem to work for me…Even though I tried it for my website…. Can you please tell me why it does not take the file in the template folder for
my template…but takes the default one… in my mod_banner… I may be doing something wrong

David Wampamba's comment is:
On May 5, 2011 at 9:18 am

Hi, thanks for the article it worked for me.

Son Warnberg's comment is:
On February 20, 2012 at 7:58 am

I do not even know how I ended up here, but I assumed this put up was good. I do not understand who you might be but definitely you’re going to a famous blogger in case you are not already Cheers!

garcinia cambogia's comment is:
On August 5, 2013 at 1:02 pm

If you would like to take a good deal from this article then you have to
apply these techniques to your won web site.

Feel free to visit my blog post: garcinia cambogia

Bailey's comment is:
On August 17, 2013 at 6:34 am

It is vital that your customers can get hold of you quickly when
they have any question regarding your products or services.
By knowing the emotional state of your potential customers,
you can drive design to capitalize on those emotions to convert more customers and close more sales.
This includes tasks such as adding and removing
a page from your website, modifying text within pages
as well as inserting and removing images.

http://submit-articles-1.blogspot.co.uk/2007/11/general-info.html's comment is:
On April 18, 2014 at 1:27 pm

Hello, its good post on the topic of media print, we
all be familiar with media is a impressive source of data.

Also visit my blog Supreme Antler strength and power (http://submit-articles-1.blogspot.co.uk/2007/11/general-info.html)

Healthy choice garcinia cambogia amazon .Com's comment is:
On May 10, 2014 at 1:12 pm

I couldn’t resist commenting. Exceptionally wel written!

Also viksit my web-site Healthy choice garcinia cambogia amazon .Com

Mack's comment is:
On August 13, 2014 at 4:17 pm

An impressive share! I have just forwarded this onto a co-worker who has been doing
a little research on this. And he actually bought me lunch because I found it for him…
lol. So allow me to reword this…. Thank YOU for the meal!!

But yeah, thanx for spending the time to discuss this topic here on your website.

Freddy's comment is:
On September 16, 2014 at 1:00 am

Hi there mates, how is all, and what you wish for to say concerning
this article, in my view its genuinely amazinhg designed for me.

garcinia atroviridis's trackback is:
On September 24, 2014 at 4:39 pm

garcinia atroviridis…

Softwyre » Joomla! Dev – Template Overrides for Modules/Components…

Carlos's comment is:
On October 5, 2014 at 10:21 pm

Aw, this was an incredibly nice post. Spending some time
and actual effort to make a superfb article… but whazt can I
say… I put thinhgs off a lot and never seem to get nearly
anything done.

terrorize.It's comment is:
On October 18, 2014 at 7:55 am

For lawtest news you have to pay a visit internet and on world-wide-web I found this web page as a most excellent site for
hottest updates.

My homepage terrorize.It

Zenwei Customer Service's comment is:
On November 18, 2014 at 1:02 pm

ӏf you would like to take much from this piece of writing then you have to applʏ sսch methods to your won web
ѕite.

my web blog Zenwei Customer Service

Darian Braun New York's comment is:
On December 8, 2014 at 8:45 pm

That’s a good start to see if it is a taste that
you will enjoy. Though this oil is rich in saturated fats, it
is still ideal for cooking. It helps to keep connective tissues strong and supple so that the skin doesn’t sag and wrinkle.

fblikes-markt.de's comment is:
On May 14, 2015 at 3:21 am

Your eagerness to know about him will attract him to you

creditos rapidos Valencia's comment is:
On October 5, 2015 at 1:17 pm

Wow increíble! Blog parece que al igual que
mi viejo! Esto es completamente , pero tiene casi el mismo diseño de página layout
y el diseño. Superb elección de colores!

Hola es encontré sitio usar incluso Buscar en similares materia tu
sitio llegó hasta, que mirar genial. He Comparte en mis marcadores
de Google.
Hola es justo convertido alerta a su blogs mediante Google, y encontró,
Es realmente verdaderamente informativo. I Voy a tener cuidado de Bruselas.

R agradecida en caso de que siguiente este Futuro. Numerosos personas puede ser favor en su la escritura.

¡Hurra! ! Hey Sé que esto es fuera de tema, pero me preguntaba si sabía de ningún widget
pude agregar a mi blog que pío automáticamente mis más recientes actualizaciones de Twitter.
He estado buscando un plug-in como esto desde hace bastante tiempo y esperaba tal vez usted tendría algo de experiencia con algo como esto.
Por favor, hágamelo saber si llegas a nada. Realmente disfruto de leer tu blog y espero con interés sus nuevas
versiones.

Ernestina's comment is:
On October 7, 2015 at 8:25 pm

Hello There. I discovered your blog the usage of msn. That is an extremely neatly written article.
I will be sure tto bookmark it and return to read extra of your
helpful information. Thanks for the post. I’ll certainly comeback.

TrackBack URL

Leave a comment
Name (required)
Email (required / will not be published)
Website
Usable HTML tags (Copy, paste, and change the text in red for your own)
+ Bold: <strong>Text</strong>
+ Italic: <em>Text</em>
+ Strike: <strike>Text</strike>
Comments