Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

How to Create a Basic Joomla Template

Posted by on in Templates
  • Font size: Larger Smaller
  • Hits: 24485
  • 3 Comments
  • Subscribe to this entry
  • Print

 

So to prove that Joomla templates aren't exactly in the same category as nuclear fission, let's build the world's most basic Joomla template. If you're thinking that this isn't at all possible in a somewhat short, friendly newsletter, you'll be surprised.

Please note that these instructions are for Joomla version 1.7, and that other versions will have slight differences, but that the concepts are the same.

First, we'll create a folder to store our files and sub-folders. It doesn't really matter what we call this folder, but let's just name it BestJoomlaTemplate.

Open a plain text editor and create a file called index.php. If you're using Notepad, make sure you select "Save As..." from the File menu, and set the "Save as type" to "All Files (*.*)" to avoid any formatting issues.

Enter this code into the blank document:

<html>
<head></head>
<body>
<jdoc:include type="component" />
</body>
</html>

If you're familiar with HTML, you will recognise this as a very basic HTML document structure. What you might not recognize is this line:

<jdoc:include type="component" />

This code tells Joomla to insert the main articles at this point on the page. So, when you set an article to display on the front page, this is where it will go. This is the entire index.php document at this point in our template creation process.

The next document that we need to create is the template details file. Create another file in a plain text editor, exactly the same way you did for the index.php, and save it as templateDetails.xml.

Enter this code into the blank document:

<?xml version="1.0" encoding="utf-8"?>
<extension version="1.7" type="template">
<name>BestJoomlaTemplate</name>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</extension>

As you can see, we have two "folder" references in the XML code, so next we'll need to create two sub-folders; css and images. These go directly inside your BestJoomlaTemplate folder.

For security reasons, you never want to leave a directory empty on your server. You also don't want to just leave your files in there without having an index.html file with them. Placing this file will help prevent the bad people, or just overly curious people, from being able to browse your directories and see your files, and possibly grab them as well. You can leave this file blank, or you can enter basic info such as this:

 <!DOCTYPE html><title></title>

This is the code you will see in all of the index.html files in a standard Joomla installation.

You now have a template folder that contains two sub-folders and two files, not including your index.html files. Now you need to upload your files to the templates directory on your site. You can do this through your favorite FTP client program, or you can upload them through cPanel, whichever you're more comfortable with. You should become comfortable with an FTP client program if you plan to do more of this type of work. It seems to be a more reliable method, especially since you can set the transfer type as you need to.

 

Once your files have been transferred to your server, use the discover feature in Extension Manager to find the new template. Go to Extension Manager, then click the Discover Link shown below.

The next image shows both buttons you'll use to find and install the template. So click the Discover button, and once the new template is listed, click the checkbox next to it and click the Install button.

The next step is to go to the Template Manager, find your BestJoomlaTemplate listing and make that the default template by selecting the box beside it and clicking Make Default at the top.

You can now view the site and see that your basic article information is displayed on the front page.

This is an intentionally simple example, and although it works don't install this on a live site. Our goal is merely to show you that it's not necessarily all that difficult to build your own template. What can be difficult is the in depth functionality and overall creativity that goes into a really well built template, and that's why we pay the pros for their hard work.

Remember, simply knowing these concepts and steps can help you tremendously in your troubleshooting and customization of your Joomla templates, whether you buy them or build them yourself. Understanding this aspect of building Joomla websites can save you money and help you take more ownership of your creative process. As we move along in the series, you will see that if you have the desire and patience to learn, you can build your own Joomla template.

This is the basic foundation of how Joomla templates work and are put together, and in two weeks we will discuss some points to consider before starting a new template.

 

Rate this blog entry:
Tagged in: templates tutorial

Comments

  • Peter Gleeson
    Peter Gleeson Sunday, 8 July 2012

    I'm definitely interested in building my own templates and this article is a good starting point. Thanks Richard

  • Barry
    Barry Friday, 8 February 2013

    tried this in three different browsers and can't read the code in enter this code into the document

  • Robert Wilson
    Robert Wilson Tuesday, 12 February 2013

    Barry,

    Thanks for pointing out the glitch. Should be all fixed now.

Leave your comment

Guest Thursday, 18 September 2014