Introduction

Just like Joomla 3, Joomla 4 also comes with a built-in template editor located inside the admin panel. This way you can edit your templates directly in the backend, right in your web browser. This is also more secure and convenient than having to use a third-party utility or an intermediary tool like FTP clients. This feature has been implemented in the Joomla 3 series and is now followed by Joomla 4 with numerous interface and feature improvements.

In this tutorial, I will show you how to modify/edit template files in Joomla 4.

How to Edit Template Files in Joomla 4

Access the Template Manager

In order to access the Template Manager, you need to first log in to the Administrator (back-end) to visit the Home Dashboard.

Joomla 4 - Login

From the Home Dashboard, click System.

Joomla 4 - Access System

You’re in the System page. You can now see the Templates settings. Click on either Site Templates or Administrator Templates to visit the particular template manager.

Here, click Site Templates to access the template manager for your site templates that are currently available.

Joomla 4 - System

Here it is, the Template Manager (Site):

Joomla 4 - Template Manager

Open / Edit Template Files

Before modifying template files, please keep the following in mind:

  • Better make changes/edits to a copy of your template, instead of the one currently in use.
  • Future updates may make changes to the core Joomla template files, which must be replicated in your edited version.
  • Make sure to create a backup of the original file before making changes.

Now, click on a template name or title you wish to modify to open its details and files.

For example, I will open the default template (Cassiopeia) which will change the view to Templates: Customise (Cassiopeia) view (as shown in the screenshots below).

Joomla 4 - Template Manager - Open a Template

Joomla 4 - Template Manager - Template Customizer

On the Editor tab on the left side, click on any of the files and you will be able to edit the corresponding file directly in your browser.

Joomla 4 - Template Manager - Modifying index.php file

You can edit the following files:

index.php – edit the main page template
error.php – edit the error page template
component.php – edit the print view
css/template.css – edit the template.css file inside the CSS folder

Joomla 4 - Template Manager - Modifying template.css file

Remember to click Save or Save & Close when you’re done!

Create New Files

To create a new template file, simply click the New File button from the toolbar at the top.

Joomla 4 - Template Manager - Add New

Here, you can select a file type to create a new file or upload one from your local storage. Note that the maximum allowed upload size is ‎10 MB.

Joomla 4 - Template Manager - Create or Upload

Rename Template Files

To rename a file, open the file by clicking on it, then click the Rename File button at the top.

Joomla 4 - Template Manager - Rename File

Now, provide a new name and click the Rename button to apply.

Joomla 4 - Template Manager - New File Name

Delete Template Files

Much like the above steps, simply open the corresponding file you wish to delete and click the Delete File button at the top.

Joomla 4 - Template Manager - Delete File

A dialog box appears asking to confirm the deletion, hit Delete to proceed or Close to cancel.

Joomla 4 - Template Manager - Confirm Deletion

Create New Folders

With the Manage Folders option (select from the toolbar), you will be able to create new folders inside your current template.

Joomla 4 - Template Manager - Manage Folders

Delete Template Folders

With the Manage Folders window still open, simply select a folder on the left and then hit the Delete button at the bottom right to perform the deletion. Please note that this action cannot be undone (irreversible), so make sure you know what you are doing!

Joomla 4 - Template Manager - Delete Folder

Copy the Template

Back in the Templates: Customise (Cassiopeia) view, from the toolbar at the top, click Copy Template button to make a copy of your existing template.

Joomla 4 - Template Manager - Copy Template

A dialog box appears. Here, enter a new template name, then click Copy Template and you will then get a complete copy of the currently open template.

Joomla 4 - Template Manager - New Template Name

Also from the top toolbar, click the Template Preview button and you will immediately see a preview of your template on the front-end.

That’s it! You now know how to manipulate template files in Joomla 4.

Conclusion

So, through this tutorial, you have learned how to modify/edit template files as well as perform other template operations 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 - (1 vote)
Latest posts by LT Digital Team (Content & Marketing) (see all)
Flash Sale! Get 25% Off On All Purchases on Today. Coupon code: FLASHSALE25 Check it out!
Black Friday & Cyber Monday deal Get 50% Off On All Purchases, don't miss this huge sale! Coupon code: BFCM50 Check it out!