How Do You Edit Joomla Template Code?

In the past, editing the Joomla template code required complex maneuvers with File Transfer Protocol. Nowadays, you can perform backend changes to the code right from your Joomla dashboard. You can customize your content, menus, and modules simply by editing some code in the template.

This guide takes you through accessing your Joomla template editor and how to customize your templates safely. 

How to Access Your Joomla Template Manager

1. Login to your Joomla admin dashboard.
2. From either the navigation menu at the top or from the left sidebar menu, click → Extensions → Templates.

3. Find the template you want to edit, and then click on the template name.

From here, you can see the files in the left-side menu for CSS, HTML, PHP, etc.

Be careful when making changes to the code because doing something wrong could break the template. 

As a precaution, it’s wise to create a backup of the code you will change — just in case anything goes wrong. 

Create Template Code Backup

• Click on the file that you want to change. You’ll see the code that controls your template’s output display to the right. 
• Select all the code, copy it into a text editor, and then save the file somewhere safe.

Now that you can recover the original code simply by pasting the saved file into the code box, let’s make some changes.

Make Changes to Your Site’s Layout

You can make changes to the layout of the Joomla site with the index.php file.  When you open the index.php file and the code displays to the right, you can see the various sections in the code for headings, the body text, and so on. 

Custom Doc Presentation By Changing the CSS File

If you want to change individual parts of the template’s content, you can look for them in the CSS file. Most of the time, Joomla designers put all the most essential code into template.css. 

Choose the template you want to modify and locate the CSS file in the left-side menu. You can add or change any headings, text, and content layout from here. 

You can do the same with other code files too – as long as you know what you’re doing. 

1. Click on any of the code files to open. 
2. Edit the file.
3. Click Save.

Other Joomla Editor Commands

Now that we know how to edit any Joomla template code, we can go over some other controls available in the Template Manager. 

Create a New File

• Click on New File → Add File. A window will open. 

1. Enter a File Name of your choice. (Something relevant)
2. Select the File Type.
3. Click on Create.

Rename File 

1. Open the file you want to rename.
2. Click the Rename button. 
3. Add a new name.
4. Click Rename button.

Delete Files 

1. Open the file you want to delete.
2. Click Delete → Delete

Add/Delete a Folder 

• Click on Manager Folders. A window will pop up. 

1. Enter a Folder Name. 
2. Click the Create button.

Copy Template 

1. Click on Copy Template. A window will open.

2. Enter a New Template Name.
3. Press Copy Template.

See Template Preview

• Click on the Template Preview button, which will give you a preview in a modal window.

That’s it! You can now edit code in any Joomla template for a custom design. 

You may run into problems at times, but fortunately, you have backups saved in a safe place. To overcome some of the issues, Joomla has a long-standing community forum where you can find answers to most anything. 

If you’re looking for a more hands-off and highly-optimized Joomla experience, you could check out ScalaHosting. They’re practically Joomla nerds. 

On top of that, they offer lightning-speed virtual private servers, highly knowledgeable and responsive customer service, and 24/7 comprehensive security. 

Contact their team to learn more about affordable web hosting packages that make you question why you haven’t found out about them until now.