Introducing template overrides

In the previous tutorial, you learned how to edit Joomla 4 template files using the built-in template editor located inside the admin panel. In this tutorial, we’re going to discuss one of the most important features of Joomla in handling and operating its template file structure. Yes, we are talking about the “Create Overrides” feature that’s also located inside the template file manager or the template editor we’ve just come to know. This way we can create overrides for modules, components, plugins, and layouts without having to use any third-party.

And well, to be honest, when a user is starting to learn Joomla and develop their own Joomla website, he may need to customize the site layout as per his needs. This requires access to the Joomla template files to be able to change, edit, and/or override them. They will need an FTP client to access the files. But what if he/she doesn’t have much technical skills to do so? Creating an FTP account, working on the server, using it to create, copy or move files… etc. All would be a bit difficult at first since he is just starting out with Joomla. Everything should be simple!

But why should we override modules, components, plugins and layouts without customizing them directly?

Alright, let me tell you this! When I first got acquainted with Joomla and started using this CMS, I made a big mistake. I customized the original files of the components and modules to change the view and design of the extensions. The problem is that I didn’t know these customizations, all would be all gone after Joomla performed an upgrade for its core and extensions. And I’m pretty sure every newbie is prone to making the same mistake. After some research, I learned about Joomla’s override feature and started overriding modules, components, and layouts. This is really a great solution, both without losing its effect after upgrades and without directly affecting the original file. Therefore, the short and concise answer to the above question is: UPGRADE. By using the overrides, your changes will not get removed or affected when you perform upgrades. That’s it!

Step by step to create overrides for templates in Joomla 4

Overrides was first introduced in Joomla 3 and now with Joomla 4 keeping forward this amazing feature, it has re-introduced them in a more improved manner. For illustration purposes, we will use the default Joomla 4 multi-purpose frontend template “Cassiopeia“. These steps would also be valid for another template as well.

From the Home Dashboard, navigate to System > Site Templates (under Templates).

Then, click on Cassiopeia Details and Files to open the template editor.

Joomla 4 - Create Overrides - Site Templates

You’re in the template editor. Click on Create Overrides to switch to this tab.

Joomla 4 - Create Overrides - Create Overrides Tab

On the Create Overrides tab, you will see 4 types of override options: Modules, Components, Plugins, and Layouts (there are only 3 types in Joomla 3).

Joomla 4 - Create Overrides - Overrides

Create overrides for Modules

For example, we will create an override for the login module.

Click on mod_login under the Modules option.

Joomla 4 - Create Overrides - Mod_Login

This will immediately create a login module override “mod_login” in the \templates\cassiopeia\html\mod_login folder.

Joomla 4 - Create Overrides - Mod_Login Override

To modify/edit the newly created override files, switch the Editor tab, navigate to \html\mod_login\default.php and make changes there. This will be used instead of the core file, so your changes won’t be lost when the core file is updated.

Joomla 4 - Create Overrides - Edit Override

* Please note that this is a copy of the core file. If you mess it up, don’t worry, simply delete the file from this folder. Joomla then will just go back to using the original file from the modules folder at the root of your Joomla installation.

Create overrides for Components

In the same method, to create an override for components that are installed on your website, you’re gonna use com_content that is a built-in component and widely used.

Joomla 4 - Create Overrides - Com_Content

As you can see, there are 6 options you can use to create overrides for content components. Just a very simple click on each one and you will have the corresponding overrides created inside the HTML folder of the Cassiopeia template.

Also, to create an override for Joomla contacts, click com_contact > contact. In case you’d like to create only for a contact category, select category from the list.

Joomla 4 - Create Overrides - Com_Contact

Create overrides for Layouts / Plugins

Much like how we created overrides for template modules and components above, we are still using the same method for layout overrides.

Joomla 4 - Create Overrides - Layouts

And for the plugins:

Joomla 4 - Create Overrides - Plugins

Remember to use the Editor tab to browse for the overrides and edit them there, then click Save & Close when done. That’s it!

Conclusion

Now you understand how to create and edit overrides for modules, components, plugins, and layouts in Joomla 4. Hope this article. was helpful. Don’t hesitate to leave us your comments should you have any questions. Besides, check out our awesome Joomla 4 templates to get your own responsive, high-performance, and SEO-optimized websites. Thanks for reading! 🙂

5/5 - (2 votes)
Lt Digital Team (Content &Amp; Marketing)

Summer Sale Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now
Summer Sale Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now