Introduction
This article shows you step by step tip on how you can create a Joomla template. You will learn the required files and codes necessary for creating a Joomla template. You can copy and paste the code and use of them the way they are or make minimal adjustments to them depending on your needs.
Step 1: Set up a directory structure
To design a basic Joomla template, click on the “create a new folder”. You will find this in the templates folder. Give the folder a name. The name has to be, a name you use for your template (mynewtemplate).
With the use of your most preferred text editor, create the files index.php and templateDetails.xml. To maintain a properly arranged structure, create 2 new folders known as images and css. Within the css folder, generate a file known as template.css.
It is okay if you put your CSS code straight into your index.php file from the beginning. However, a lot of web designers love to put their CSS code in a different file and then connect it to many pages using link tag. Putting it straight may as well diminish the time it takes your pages to load because the various files can be cached.
Run the commands below to set up the folder and file structure:
* mynewtemplate/ ** css/ *** template.css ** images/ ** index.php ** templateDetails.xml
Step 2: Create a basic templateDetails.xml file
It is very significant you create the templateDetails.xml file. It is the file that allows Joomla to identify your template. The file contains the main metadata that consigns the template you’ve created.
The sentence structure of the file varies from one Joomla version to the other.
For Joomla 1.5, run the command below:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>2008-05-01</creationDate>
<author>John Doe</author>
<authorEmail>john@example.com</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>John Doe 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>For Joomla 2.5 and later versions, run the command below: Alter “2.5” version of Joomla into your Joomla version and install with the commands below:
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>mynewtemplate</name>
<creationDate>2008-05-01</creationDate>
<author>John Doe</author>
<authorEmail>john@example.com</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>John Doe 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</extension>You’ll discover that we have a collection of data across markup tags (the <element>s). The best way you can go about it is to copy and paste it inside your templateDetails.xml file and alter the appropriate parts (like <name> and <author>).
The <files> section ought to be made up of the files that you utilize. It is likely that you are not yet aware of what they are. However, there is no need to worry. Leave it for now and come afterward to update it.
You can use the <folder> part, to define the whole folder straight away.
Do not alter the positions. They are the typical setup and will help you to readily switch from the regular templates.
Step 3: Create a basic index.php file
The index.php file is the central part of every page designed in Joomla! You’ll basically create a page that is similar to HTML. However, instead of the HTML, you put PHP code in the position that is meant for your site content. The template functions by incorporating Joomla code into module locations and the component part in your template. Whatever you add to the template will become visible in every one of your pages except you incorporate it through one of these parts through the use of Joomla CMS (or custom-made code).
The following are basics codes you can just copy and paste into your web design.
Step 4: Set up the starting part of your Joomla template
A Joomla template starts with the commands below:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
The initial line prevents mischievous individuals from viewing your code and working against you.
The succeeding line is the Document Type Declaration (DOCTYPE). It indicates to web browsers and web crawlers the HTML version implemented on the page. The doctype is HTML5 and the most recent version HTML. It is commonly very compatible with previous versions but it comes with a lot of new functionalities. You need to know that this would not function properly in Internet Explorer 8 or previous versions without some hacking. You need to consider this and verify what your customers’ needs are to guide you on the best doctype to use. Nevertheless, it is what is being utilized in Joomla 3.6 and the newer versions.
The next line (3rd) starts with your HTML file and explains the language of the website. An HTML file is classified into two; the head and the body. The head is made up of the document data while the body is made up of the website code which helps you to manage the design.
Step 5: Create the Head sector
For the head run the commands below:
<head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> </head>
The initial row helps Joomla to incorporate the right header data including the title of the page, the Meta data together with the JavaScript of the system. The remaining part generates links to two schemes: technique pages and your personal technique page when it is named as template.css and is positioned in your template directory’s css folder. Thus, if your template is http://www.mysite.com/templates/my_template/, your css files will be placed as: http://www.mysite.com/templates/my_template/css/).
Step 6: Create the Body sector
To do this, run the codes below:
<body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body>
It may astonish you that this is already sufficient. It is all you need. Although it is the just the fundamental layout, it will fulfill what is required. The remaining part would be performed by Joomla. These rows, commonly referred to as jdoc statements, inform Joomla to incorporate the outcome from specific sections of the Joomla structure. You must, nevertheless, ensure that you set your menu to be placed on “top” element position.
Step 7: Place Module Positions
On top of the row that indicates name=”top” incorporate an element location known as top and let Joomla position modules into this part of the template. The row that contains type=”component” is where the entire articles and key content. It is in fact, the component and is extremely significant. It is positioned at the core of the template.
You are free to incorporate your specific component rows in any location of choice within the body. However, you ought to incorporate an equivalent row to the templateDetails.xml file which is located beside the index.php of your template.
Step 8: Design the template End
To conclude your template design, implement the code below to close the entire set-up.:
</html>
Step 9: Set Customized Images
If you love to incorporate pictures on your template implement the commands below:
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />
At this point, the variable template will plug in your template name.
Step 10: Add Customized CSS
To incorporate customized css run the code below:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/styles.css" type="text/css" />
All the files you incorporate need to have a row in the templateDetails.xml file for the template, except you placed it in a mini-folder which you can incorporate into a <folder> element).
You will now have your last as shown below:
<?php defined('_JEXEC') or die('Restricted access');?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" />
</body>
</html>Step 11: Verify the template
To verify the template, in the Template Manager, click on it and then select Default to convert it to your default template.
Once you are done with this, you will instantly see your new template if you are using Joomla 1.5. It would be located in the Template Manager. You can access it by clicking on Extensions and selecting the Template Manager from the drop-down menu. If you are making use of Joomla 2.5 edition and above, you ought to first inform Joomla that you’ve designed a fresh template.
This element you require to do this is referred to as Discover Extensions and you can access it by clicking Extensions and then Extension Manager followed by the Discover tab. By clicking on the Discover tab to find your template, you can select your template and after that you need to hit on the Install tab to get it installed. At this point, you’ll see the template you’ve just created in the Template Manager (Styles). To get to it go to Extensions and then click on the Template Manager
It is possible to create a template outside Joomla platform and when you are done, you can merely install it just like you would other standard extensions. There are a lot of ways you can follow to preview your index page while you create it. You can either do it by inserting the patterns into the head of your index page or by linking it straight to the page pattern you want to use momentarily. When you are ready to package the file, you can take the links off.
Step 12: Package your template and get it ready to be installed.
If your directory contains a lot of slack files, it’ll not be suitable for sharing. Therefore, the last thing you need to do is to properly package your directory so that it could easily be distributed. To do this, you need to compress the directory structures and the entire files and archive it. You ZIP the package using a .zip extension or leave it in TAR-gzip format with the use of a .tar.gz extension. Alternatively, you can leave it in TAR-bz2 format using a .tar.bz2 extension.
If you put your template in a directory named mytemplate/, for instance, to package your template, you can link to the directory and run any of the following commands:
tar cvvzf ../mytemplate.tar.gz * zip -r ..\mytemplate.zip *.*
Conclusion
Once you get to this step, you’ll already have a functioning Joomla template. It may not yet have the great look you want but what you can do is to experiment and try out the design.
Check out these top 3 Joomla hosting services:
- Click here to know more about the Best website hosting.
