Joomla Template Step by Step Tutorial

What Is a Joomla Template?

A Joomla template controls the visual layout of your site. It defines where the header, footer, sidebar, and main content area sit on the page. It also decides which CSS files load and how module positions are arranged.

Building your own template is the fastest way to get a site that looks exactly the way you want. Pre-built templates are convenient but they carry overhead - unused CSS, JavaScript you do not need, and module positions you will never fill.

Pack Overview

This pack starts with a bare-bones template, adds module positions, and then shows a workflow using Dreamweaver CS3 for visual layout. Even if you do not use Dreamweaver, the second article is useful because it explains how template overrides interact with HTML structure.

The third article covers the MVC pattern. Why include it in a template pack? Because template overrides let you change how components render their output. Understanding MVC helps you know which file to override and why.

Walkthrough

Step 1 - Build the Minimum Template

Every Joomla template needs three things:

• index.php - the main layout file
• templateDetails.xml - the manifest that registers positions and metadata
• A CSS file for styling

The first article walks through each file. You will create the directory under templates/yourtemplatename/, write the XML manifest, and add a basic index.php with a <jdoc:include> statement for the main component area.

One thing that trips people up: the <positions> block in the XML is what makes module positions show up in the admin panel. If you forget to list a position there, you will not be able to assign modules to it.

Step 2 - Add Visual Design with Dreamweaver CS3

The second article introduces a design-first approach. You build your layout in Dreamweaver, slice it into HTML regions, and then replace static content with Joomla’s <jdoc:include> tags. This is a practical workflow for designers who think visually.

Even without Dreamweaver, the technique applies. Design your layout in any HTML tool, then convert it to a Joomla template by inserting the dynamic tags.

Step 3 - Understand Template Overrides and MVC

Template overrides live in templates/yourtemplatename/html/com_componentname/viewname/. They let you change component output without modifying core files. This is critical for maintaining upgradability.

The MVC article explains how views are resolved, which makes it clear why the override directory structure must match the component’s view names exactly.

Module Positions Explained

Module positions are named placeholders. You define them in the XML manifest and place them in index.php using:

1

<jdoc:include type="modules" name="position-name" />

Common positions include left, right, top, bottom, header, and footer. You can name them anything. Just keep the names descriptive so they make sense in the Template Manager.

Common Pitfalls

Missing XML manifest entries. If you add a new CSS file or position, update templateDetails.xml. Joomla reads this file to know what belongs to your template.

Hardcoded widths. Use percentage-based or responsive CSS. Fixed pixel widths break on mobile devices and smaller screens.

Forgetting the component area. Every template needs at least one <jdoc:include type="component" />. Without it, no component output will render.

FAQ

Can I use a modern editor instead of Dreamweaver?
Absolutely. VS Code, Sublime Text, or any editor works fine. The Dreamweaver article is about the workflow pattern, not the tool itself.

How do I preview my template without setting it as default?
In the Template Manager, you can preview a template by appending ?template=yourtemplatename to your site URL. This avoids switching the default while testing.

Do I need PHP skills to build a template?
Minimal PHP is needed. You mainly use <jdoc:include> tags and a few PHP echo statements for things like the site name or template path. No database queries or complex logic required.

What about responsive design?
Add a viewport meta tag and use CSS media queries. Joomla’s template system does not restrict your CSS in any way. You have full control over the stylesheet.

How do I add JavaScript to my template?
Place your JS files in the template directory and load them in index.php using JHtml::script() or a plain <script> tag. Using JHtml is preferred because it handles duplicates automatically.