How to Edit Joomla Template Code in Version 4.x and 3.x ?

Do you want to edit the Joomla template code and customize the template according to your website? Well, it’s very easy and can be done in few simple steps. Joomla is a popular open-source content management system that you can use to publish content. It is a CMS platform that powers all kinds of websites like business, eCommerce, publications, community-based and more on the internet. Joomla is a great solution for those who want to create an awesome website.

The Content Management System offers robust solutions to build a dynamic website. With millions of downloads, Joomla is surely a great platform to start working on your website. It is written in PHP and uses MySQL as its database. Thanks to its popularity Joomla has thousands of extensions that you can easily add. Additionally, you can install Joomla very easily.

Besides, you get a lot of flexibility and customization while creating a Joomla template. You can also find free Joomla templates for various purposes, and use them to improve the functionality of your website.

Do you want to edit the Joomla template code? But do not know where to start? Well, do not worry and read this post to know more.

How to Edit Joomla Template Code?

It is very simple to customize Joomla templates. And even if you are not a developer or do not have much technical skills, it can be done in just a few steps. However, do check the Joomla version you have installed because the steps do vary accordingly. Significantly, you also need to understand how a CMS platform works, also how you can use it to create a website of your own. So, download the latest version of Joomla and start exploring the platform.

Here I am going to discuss in detail the steps that you need to follow to edit the Joomla template code for its version 3.x and 4.x and customize the template for your website.

Steps to Edit Joomla 3.x Version Template

Templates are HTML, PHP and image files that are stored in the template directory of your website. You can easily edit the code of these templates by following a few simple steps. Now, moving on to the steps that you need to follow to edit the Joomla 3.x template code, here is what you need to do.

Copy the Template

• Remember to copy the template with the respective files. Therefore you need to make a full copy of the template for which you need to customize the template view.

To open the Template customise option here are the steps that you need to follow.

• Open the column and click on the name of the template for which you want to edit the code.
• Check out the styles and then click on the template option, this will open up the Template Manager and the related templates.
• Here you can choose the template for which you want to modify the code. Thus you can see the Template Manager change to customise view template.
• Now a box with a select file option will open up. You can choose several options to customise the look of a template. The template manager supports source file, image files, font files, and zip files. Simply choose the file and you are good to go.

Copy the Existing Template

Create a New Template using the Existing One

• Open Template Manager and click on the copy template option. Here you will find the option to customize the template view.
• Enter a new name for the template and click on the copy template.
• The template is now copied.

Search for the New Template

• Open the Administrator > Extensions > Extension Manager > Discovery.
• Click on the Discover icon to open it.
• Choose the new template.
• Click on the install option.

Once the installation is complete you can find the new template as – Administrator > Extensions > Template Manager.

• You can make the new template as default.
• And check it on the website.

Find the New Template

When you manually copy the template, the new template must be launched to your Joomla site by using the discovery process. Here are the steps that you need to follow to find the new Joomla template:

• Open the Administrator, and then click on the Extensions > Extension Manager > Discover option.
• You need to click on the Discover icon.
• Then choose your new template here.
• Lastly, click on the install option.

Once the new template has been successfully installed, you can find the new template in the Admin section > Extension > Template Manager.

• Make sure to select the new template as default.
• To confirm it you can view the site.

Steps to Edit Joomla 4.x Template Code

Similarly, you can edit the template code for Joomla 4.x as well. You do not have to use FTP or any other extensions. Let’s find out how you can edit the template code here.

• First of all, log in to your Joomla 4.x dashboard.
• On the left sidebar menu open the Extensions > Templates. Here you need to search for the template that you want to edit code for.
• Click on the template name that you want to edit.
• Click on the file, to open up, and then edit the file and click to save it.
• To create a new file in the template click on the New option > Add File. Here select the file type and then create it.
• In case you want to rename the file then click on the Rename File > add new Name > and click on the Rename option.
• Also, if you want to delete the file, open the file > click on the Delete > and then Delete the file.
• If you want to add or delete a folder in Joomla Template then, click on the Manage Folders option.
• Also, if you want to copy a template then, click on Cope Template > Add new template name > and click on a Copy template option.
• Lastly, click on the Template Preview option, to check the change you have made.

Wrapping Up…

Customizing any of the Joomla templates is quite easy. And just like Joomla 2.x, you can edit Joomla 3.x and 4.x templates using the template editor from the admin panel. You can edit the template directly within the browser and customise it accordingly. Also, before editing the template it is always good to have a backup of the file you are going to edit.

If you just started to create a Joomla template or edit it, but are confused, then do not get overwhelmed with it. It is pretty simple, leveraging how the Content Management System functions, you can use the edited Joomla template to make your website look aesthetically appealing.

Hopefully, this post is helpful for you to edit the Joomla template in 3.x and 4.x. However, if you have any doubt or questions do let me know in the comment section. Also, check out this Joomla template creator, to customize more versatile designs for your website. You can read Joomla page builders article.