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 → ExtensionsTemplates.
  1. 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 FileAdd 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.
  1. Enter a New Template Name.
  2. 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. 

Was this helpful?

What’s your goal today?

1. Find the right Joomla hosting solution

If you’re looking for industry-leading speed, ease of use and reliability Try ScalaHosting with an unconditional money-back guarantee.

2. Make your website lighting fast

We guarantee to make your WordPress site load in less than 2 seconds on a managed VPS with ScalaHosting or give your money back. Fill out the form, and we’ll be in touch.

Please enter a valid name
Please enter a valid website
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

3. Streamline your clients’ hosting experience

If you’re a web studio or development agency hosting more than 30 websites, schedule a call with Vlad, our co-founder and CTO, and see how we can deliver unmatched value to both your business and your clients.


Need a custom cluster or professional advice?

Book a meeting and get a free 30-minute consultation with Vlad, co-founder & CTO of Scala Hosting, who will help you select, design and build the right solution - from a single data center cluster to a multi-region & multi-datacenter high availability cluster with hundreds of servers.

Book a free consultation

4. Learn how to grow your website in 2024

An all-star team of SEO and web influencers are sharing their secret knowledge for the first time in years. Learn about the future of SEO, Web Design best practices and the secrets to getting the foundation for your website to thrive. Watch the exclusive webinar.

An Exclusive Insiders Look Behind The SEO and Web Development Curtain


Working in the web hosting industry for over 13 years, Rado has inevitably got some insight into the industry. A digital marketer by education, Rado is always putting himself in the client's shoes, trying to see what's best for THEM first. A man of the fine detail, you can often find him spending 10+ minutes wondering over a missing comma or slightly skewed design.