This tutorial is an absolute beginner's guide on how to create and install a template in your Joomla! website.
It is a part of a series of tutorials that'll teach the basics of creating a 2 column web page layout for your Joomla! website. The main content will be on the left and a sidebar will be on the right.
NOTE: The template you're going to create is done in your local development environment. In plain English, this means on your computer (or laptop) and not on the 'live' (production) server.
IMPORTANT: This tutorial assumes that you've just finished installing WAMP server and have installed Joomla! without any sample data.
If you haven't installed Joomla! in your WAMP server, see this tutorial: How To Install Joomla In WAMP Server (Windows 10).
The Directory Structure
Creating a custom template involves creating several folders and files. By the end of this tutorial your template folder structure will look like this:
NOTE: my-website is the name of your website and mytemplate is the name of your template.
STEP 1: Create The Directory Your Template Will Reside In
Go to the templates folder of your Joomla! website and:
- Create a new folder. This will be your custom template folder.
- Name it a short meaningful name. In this tutorial I'll be using the name
mytemplate.- IMPORTANT: Use only letters, numbers and underscores in your template's name.
The directory structure should look like this:
Where mytemplate is the name of your template.
STEP 2: Create The index.php File
Open Notepad++ (or your favourite text editor) and:
- Copy and paste the following code into a new file:
<?php
// No direct access.
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
<body>
<!-- start header -->
<div class="header">
<!-- something goes here -->
</div>
<!-- end header -->
<!-- start nav bar -->
<div class="navigation">
<jdoc:include type="modules" name="navigation" />
</div>
<!-- end nav bar -->
<!-- start banner -->
<div class="banner">
<!-- something goes here -->
</div>
<!-- end banner -->
<!-- start main content -->
<div class="main-content">
<!-- start col-1 -->
<div class="col-1">
<jdoc:include type="component" />
</div>
<!-- end col-1 -->
<!-- start col-2 -->
<div class="col-2">
<jdoc:include type="modules" name="latestnews" />
</div>
<!-- end col-2 -->
</div>
<!-- end main content -->
<!-- start footer -->
<div class="footer">
<!-- something goes here -->
</div>
<!-- end footer -->
</body>
</html>
- Save the file to the
mytemplatefolder you just created in STEP 1 and name itindex.php. To be a bit more specific, the name of the file is:indexwith the file extension of:.php.
The directory structure should now look like this:
STEP 3: Creating The templateDetails.xml File
The templateDetails.xml file is the file that Joomla! uses to discover and install your template. As such, it's a critical component of your template.
Open Notepad++ (or your favourite text editor) and:
- Copy and paste the following code into a new file:
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.9" type="template">
<name>mytemplate</name>
<creationDate>2021-07-10</creationDate>
<author>Johnny Doe</author>
<authorEmail>johnny@email.com</authorEmail>
<authorUrl>https://www.my-website.com</authorUrl>
<copyright>Johnny Doe 2021</copyright>
<license>GNU/GPL</license>
<version>1.0.1</version>
<description>My Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>js</folder>
<folder>css</folder>
</files>
<positions>
<position>navigation</position>
<position>breadcrumbs</position>
<position>latestnews</position>
<position>footer</position>
</positions>
</extension>
- Once pasted, update the following tags with your info:
<name>,<creationDate>,<author>,<authorEmail>,<authorUrl>, and<description>. - Save the file to the
mytemplatefolder you just created in STEP 1 and name ittemplateDetails.xml. WheretemplateDetailsis the name of the file and.xmlis the file extension.
The directory structure should now look like this:
STEP 4: Adding The CSS, JS, and Images Folders
Go to the mytemplate folder (where mytemplate is the name of your template) and:
- Add a new folder and name it
css(all lower case letters). - Add a new folder and name it
images(all lower case letters). - Add a new folder and name it
js(all lower case letters).
The directory structure should now look like this:
STEP 5: Create The template.css File
The next step is to create the template.css file.
Open Notepad++ (or your favourite text editor) and:
- Copy and paste the following code into a new file:
html, body, div, span, applet, object, iframe,
h1, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
background-color: #FFF;
color: #555;
font-family: sans-serif, Georgia;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.header {
}
.navigation {
}
.banner {
}
.main-content {
}
.col-1 {
}
.col-2 {
}
.footer {
}
- Save the file to the
mytemplate/cssfolder you just created in STEP 4 and name ittemplate.css. Wheretemplateis the name of the file and.cssis the file extension.
The directory structure should now look like this:
This is a bare-bones external CSS stylesheet that really doesn't style much, if anything at all. Don't worry about this for now, you'll make it into a real stylesheet in the next tutorial.
STEP 6: Installing The Template
Now that the basic template set up is done, you now need to install the template in your Joomla! administrator panel.
These are the steps:
- Log in to your Joomla! website's administrator panel.
- Navigate to Extensions->Manage->Discover (in the administrator's top menu bar).
- The Extensions: Discover panel will now load and you should see your template there.
- If you don't see your template, click on the
Discoverbutton. It should now appear.
- If you don't see your template, click on the
- Select it and click the
Installbutton to install it.
Now that the template is installed, let's make it the default template of your Joomla! website. This is what you need to do:
- Navigate to Extensions->Templates->Styles (in the top menu bar).
- The Templates: Styles (Site) panel will now load. You should see your template listed among the other templates installed.
- Select it and click the
Defaultbutton in the top menu bar.
The template you just created is now installed and is the default template for your Joomla! website.
At this point, the template is nothing to look at. So, let's add a logo and a navigation bar. Go to the next part of this tutorial: Creating A Custom Joomla Template (PART 2).