Write your own Template Overrides

Thank you for your contribution: 

Fiat 500 - tuned  by Abarth!Imagine you are planning a Joomla! site with three different components. When you install the components they all come with predefined views to display their content. The views are created by the component developers and worst case is, that you have three different approaches to interface design on your site.

Of course, your client wants to have a unique template design and now you have to tweak the existing component views with additional CSS classes, different HTML tags or write a complete new markup.

You could change the code of the component. However, it is not good for your reputation because with the next component update, your changes would be gone!

This is the situation where template overrides enter the game.

Template overrides are basically a solution for the

Every time you hack core, God kills a kitten

problem. Even if there is no God available in your mind, and even if it's not core but component code, please, think of the kittens!

Let's assume you are a customer that uses our wonderful Cocoate Real Estate component.

Your idea of displaying the house listing is totally different from mine. Let's change it!

The component has a default template layout for each view. We want to change the frontend view, which is stored in the file /components/com_cocoaterealestate/views/object/tmpl/default.php. This file makes the page look the way it looks (Figure 1) and it is build around data which was collected in the file /components/com_cocoaterealestate/views/object/views.html.php.


Figure 1: Default object view

For our example we are using the beez_20 Template as a base. In reality you probably would start creating your own template but It would be too much at this point to describe the necessary steps so let's use the existing beez_20. Even if there is a Joomla! core update, your overridden files will not get lost.

Copy the file




The template folder structure is like this:

  • /templates - the folder contains all templates
  • /templates/beez_20 - the folder contains the beez2 template
  • /templates/beez_20/html - the folder contains the template overrides
  • /templates/beez_20/html/com_cocoaterealestate - the folder contains the template overrides for one component
  • /templates/beez_20/html/com_cocoaterealestate/object - the folder contains the template overrides for one view of the component

 Uncomment or insert the last 5 lines of code (Listing 1).

// No direct access to this file
defined('_JEXEC') or die;
<h1><?php echo $this->item['title']; ?></h1>
<img src="<?php echo $this->item['image']; ?>">
  <?php echo $this->item['zip']; ?>
  <?php echo $this->item['city']; ?>,
  <?php echo $this->item['country']; ?>
  <strong><?php echo $this->item['price']; ?> €</strong>

Listing 1: /templates/beez_20/html/com_cocoaterealestate/object/default.php

The PHP function print_r() shows the content of the array $this->item. To make the output better readable I added it between
<pre> </pre> tags. When you reload your page you see now all the data. You can use the listing below for your individual template
(Figure 2).


Figure 1: Overridden view Step 1

You should see the content of the array

    [id] => 1
    [image] => http://farm4.staticflickr.com/3100/2724105775_4d039b4127.jpg
    [title] => First House
    [city] => Fitou
    [zip] => 11510
    [country] => France
    [price] => 85000

Depending on the component the array could be much bigger and more complex. In our case it is very simple.

Now you can pick the values you need and built your desired markup around.

Example: If you want to have the price in a <div> Tag with a special class it could look like this:

<div class="myprice>

<?php echo $this->item['price']; ?>


It is possible to use any kind of PHP statements in this file but it would be much better if the component developer offers all the necessary fields in the array so that you are able to concentrate on the markup.

More information on overrides