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.
From the Home Dashboard, click 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.
Here it is, the Template Manager (Site):
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).
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.
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
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.
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.
Rename Template Files
To rename a file, open the file by clicking on it, then click the Rename File button at the top.
Now, provide a new name and click the Rename button to apply.
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.
A dialog box appears asking to confirm the deletion, hit Delete to proceed or Close to cancel.
Create New Folders
With the Manage Folders option (select from the toolbar), you will be able to create new folders inside your current template.
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!
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.
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.
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! 🙂
- What are joomla tags and how are the used? - November 3, 2024
- Why and how to create hidden menu items in Joomla? - October 31, 2024
- How to publish smartslider 3 to joomla 4? - October 31, 2024
A CMS is meant to make content management more efficient and effective. That should include how the material is presented to the web visitor. While Joomla’s content management is very capable, material presentation is not. Unless I stick with a template’s default settings, I have to roll up my sleeves and dive into html and css editing, something I am not comfortable with. It’s beyond my (and others’) capabilities. Because I’m not a web programmer, I have to relearn all this stuff every time I want to make a change, and I just flat out don’t have the time to do that. Word processors long ago got away from codes and use WYSIWYG exclusively for page layout. Why can template “editing” be the same? It makes more sense to design the layout graphically instead of diving into code.