Problem: Joomla "by default" Frustrations

Have you felt frustrated when you are unable to modify some "by default" positioned elements when creating a Joomla! Powered website?  Well, you're not alone -- we all have been halted by elements you cannot "move" but only style. For example, what if you want to place the title at the bottom of each article instead of having it above? Or what if you want to create more divs for higher modifications and styling?

Solution: Joomla Template Overrides, w00t!

Here is the good news: Joomla allows us to create Template Overrides, which are modifications to the Joomla components or modules, that can be done from the template, and avoid hacking the Joomla! files.

Identifying your component

First of all, you need to identify what you want to change, so you'll know what file you need to override.  Let's use the example of placing the article's title at the bottom.

This is the way Joomla installs its default blog (using the sample blog content and the default Protostar template from Joomla! 3.0):

Joomla blog using default sample content

To identify the component, you need to access the menu item of that page, from the administration site, and take a closer look at the URL it has.

Identifying the menu item

When you enter the menu item itself, you'll notice that it has a link that brings some information about the component.

Identifying the link in the menu item

So, let's examine the link: index.php?option=com_content&view=category&layout=blog&id=9

File: index.php

Refers to the Joomla point of entry, which is common for all components

Component: option=com_content

The option parameter is saying that the component used is com_content, which is the component that manages the categories and articles of the Joomla content.

View: view=category

This means that the content component (which has many views) is using a view for presenting a category.

Layout: layout=blog

There are different layouts available for the view.  In this case, it's presenting the category by using a blog layout.  Sometimes the layout is not present, and it means that it is using the default layout (called "default").

Item: id=9

Lastly, this means that the category's ID is # 9.  This is irrelevant for creating the override, while it's a very useful tip for understanding the Joomla database structure.

Identifying the file to be overriden

Regardless of the component, view, or layout, everything will reside in a PHP file that has a particular structure--a structure we're probably not happy with.  But, when we understand the current structure, then it is really easy to identify the file you want change.

Joomla component structure from its files, identifying the blog.php file

If you explore your Joomla install, you'll notice that under the folder components, you have the com_content folder (which we identified before), and then you have the views folder, with the category folder in it (with the presentation of the category view).  Then we have the tmpl folder, which contains the layouts; and finally, we have the blog.php file, which is the file we're looking for (or the starting point when there are more files that conform the layout)

Layouts with several files

In some cases, the layout may be a composite view.  For example, the blog is a composite view because it has a main file for the whole blog, but it also has different files for presenting its individual parts--like each separate article.  You will notice that this layout has more than one file because there are many php files in the tmpl folder that start with blog (please see the image above, we have blog.php, blog_children.php, blog_item.php, and blog_links.php).

Now, this is the part where we need to be a bit PHP savyy or use our logic the most.  We want to modify each article's layout within the blog.  That means that the file we need to modify is not blog.php but the file that presents each article.

Identifying the layout file

From the PHP code, if you're not afraid of it, you can check that every time that PHP does a cycle to present the articles, it uses the code echo $this->loadTemplate('item'); which means it's using the file that presents the item (article). So, the file we want to modify is blog_item.php.

Overriding the file into our template

Now that we identified the file (of course you can explore it and do some "echo" tests to be sure it's the right file), we're going to copy this file into our template, by using the html folder and the same structure that it has in the component. In this case, it will be: html/com_content/category/blog_item.php (notice that we don't need the view or the tmpl folder here).

File copied to our template files

Now this new file is our override, because you will notice that if you do changes to the file (try doing a "hello world" from it), Joomla will prefer this file over the component's default file. You can start making changes at this point.

Making changes

Of course, making changes here requires basic PHP knowledge, but you will notice that simple changes are also achievable by applying simple logic and identifying the tags used in the HTML generated from Joomla.

In this case, the title is a h2 tag, that comes with an IF sentence (because it's checking if we have chosen to display the title or if it's disabled from the configuration).

Identifying the code we want to move or change

So let's move the title all the way to the bottom (just right before the afterDisplayContent call, which is a trigger that is executed after the content is displayed, useful for plugins), and the final code will look like this:

Change performed in the override file

Voila! Our site will look like this:

Final look of our blog after override is performed

Conclusion

In all the template and site creation process, changes may be performed at almost any level, especially when customising the components and modules. Although it's a process of trying, moving some code around and getting our hands dirty, it's a very useful to know how to make almost any change you want to your Joomla site.