In the previous article in this Joomla 4 templating series, we completed coding the template for
In this final article we'll create a zip file:
tpl_simple.zip which we can install into Joomla 4.
File and Folder Structure
The file/folder structure for the
simple template should now be as follows:
tpl_simple (folder) templateDetails.xml joomla.asset.json index.php component.php error.php html (folder) language (folder) en-GB (folder) tpl_simple.ini tpl_simple.sys.ini media (folder) css (folder) style.css
style.min.csserror.css error.min.cssjs (folder) template.js template.min.jsscss (folder) images (folder)
Create the installable zip file for the simple template
- Open the
- Compress the files inside the folder to zip format
- Your zip file should be named:
Once you have the installable zip template, log in to the Joomla administrator backend and go to: System-Install-Extensions and upload the file. If all is well, you should see a success message.
To use it, make it the default template. Go to System-Site Template Styles. Choose Simple and make it the default template.
If the install fails, you'll need to go through the code and check if you have any mistakes. The most common culprit is the
templateDetails.xml file. Since it's an XML file, pay attention to closing brackets. Correct the code and try the install again.
If you've any mistakes in the php files, you might also get a failed install. For instance, leaving out a semi-colon at the end of a php statement.
Another common error is that Joomla doesn't like certain folders empty on the install. The
html folder is a common culprit because we're not usually going to put anything in here until after the template is installed and we've started coding for component/module/plugin/layout overrides. In this case, you'll see a failed install with a message like:
JInstaller: :Install: File does not exist [ROOT][TMP]/install_63d118120bdcd/html
That means the
html folder is empty, so to solve that, put an
index.html file into the empty folder with just the following contents:
Re-zip the template and try the install again.
Downloadable simple template
You can d/l the complete simple template zip here. It's tested on a Joomla 4.4 with php8.1 install. When it's installed:
- Make it the default template (System-Site Template Styles. Select
simpleand click the Default button)
- Compile scss into css (or just add your own
- Create a test article and add it to the Main Menu (Main Menu-Home. Open Home, change Menu Item type to Single Article, then choose Select Article and choose the test article). This will place that article into the
jdoccomponent position on the home page
- You can also paste the url for your chosen Google Fonts (System-Site Template Styles. Open
simple, choose Advanced tab). Once they're reference in the stylesheet, you'll see them on the frontend. Example: you choose Poppins 400 and Public Sans 400 and light italic 300. Google gives you some code. The url to paste in is: